From 50695fcfd5e0dc6fd55185f4399d45ed1852f880 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 11 Aug 2023 15:38:24 +0200
Subject: [PATCH] fix(front): fix alignment of some input elements on event
 edition form

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/assets/oruga-tailwindcss.css |  5 ++++-
 js/src/views/Event/EditView.vue     | 11 ++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index bd134fb11..73cde4dbf 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -65,6 +65,9 @@ body {
 .field-label {
   @apply block text-gray-700 dark:text-gray-100 text-base font-bold mb-2;
 }
+.o-field__horizontal-label .field-label {
+  @apply mb-0;
+}
 .field-danger {
   @apply text-red-500;
 }
@@ -193,7 +196,7 @@ body {
 
 /* Select */
 .select {
-  @apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-8 border-2 border-transparent h-10 shadow-none border rounded;
+  @apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-8 border-2 border-transparent h-10 shadow-none border rounded w-full;
 }
 
 /* Radio */
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index 4a00cf7c6..551ee3959 100644
--- a/js/src/views/Event/EditView.vue
+++ b/js/src/views/Event/EditView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto" v-if="hasCurrentActorPermissionsToEdit">
+  <div class="container mx-auto px-1" v-if="hasCurrentActorPermissionsToEdit">
     <h1 class="" v-if="isUpdate === true">
       {{ t("Update event {name}", { name: event.title }) }}
     </h1>
@@ -63,7 +63,7 @@
       <o-field
         horizontal
         :label="t('Starts on…')"
-        class="begins-on-field"
+        class="items-center"
         label-for="begins-on-field"
       >
         <o-datetimepicker
@@ -85,7 +85,12 @@
         </o-datetimepicker>
       </o-field>
 
-      <o-field horizontal :label="t('Ends on…')" label-for="ends-on-field">
+      <o-field
+        horizontal
+        :label="t('Ends on…')"
+        label-for="ends-on-field"
+        class="items-center"
+      >
         <o-datetimepicker
           class="datepicker ends-on"
           :placeholder="t('Type or select a date…')"