From d004d2e74fcfe0bb1b0a8cbf1be23056983ba309 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 4 Nov 2019 16:37:57 +0100
Subject: [PATCH] Reduced datetime picker width

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 CHANGELOG.md                               |  1 +
 js/src/components/Event/DateTimePicker.vue | 48 ++++++++++++----------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1316356f..1d5537ce4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,6 +55,7 @@ In order to move participant stats to the event table for existing events, you n
 - Added missing `setup_db.psql` file (Geno)
 - Fixed docker setup when using non-GNU make (JohanBaskovec)
 - Fixed actors deletion that didn't cascade to followers
+- Reduced datetime picker input width
 
 ### Security
 - Sanitize event title to avoid XSS
diff --git a/js/src/components/Event/DateTimePicker.vue b/js/src/components/Event/DateTimePicker.vue
index b9fac5814..f31adb947 100644
--- a/js/src/components/Event/DateTimePicker.vue
+++ b/js/src/components/Event/DateTimePicker.vue
@@ -12,26 +12,32 @@
 ```
 </docs>
 <template>
-    <b-field grouped horizontal :label="label">
-        <b-datepicker
-                :day-names="localeShortWeekDayNamesProxy"
-                :month-names="localeMonthNamesProxy"
-                expanded
-                :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
-                :min-date="minDate"
-                v-model="dateWithoutTime"
-                :placeholder="$t('Click to select')"
-                icon="calendar"
-        />
-        <b-timepicker
-                placeholder="Type or select a time..."
-                icon="clock"
-                v-model="dateWithTime"
-                expanded
-                size="is-small"
-                inline>
-        </b-timepicker>
-    </b-field>
+    <div class="field is-horizontal">
+        <div class="field-label is-normal">
+            <label class="label">{{ label }}</label>
+        </div>
+        <div class="field-body">
+            <div class="field is-narrow is-grouped">
+                <b-datepicker
+                        :day-names="localeShortWeekDayNamesProxy"
+                        :month-names="localeMonthNamesProxy"
+                        :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
+                        :min-date="minDate"
+                        v-model="dateWithoutTime"
+                        :placeholder="$t('Click to select')"
+                        icon="calendar"
+                        class="is-narrow"
+                />
+                <b-timepicker
+                        placeholder="Type or select a time..."
+                        icon="clock"
+                        v-model="dateWithTime"
+                        size="is-small"
+                        inline>
+                </b-timepicker>
+            </div>
+        </div>
+    </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@@ -101,4 +107,4 @@ export default class DateTimePicker extends Vue {
             padding: 0;
         }
     }
-</style>
\ No newline at end of file
+</style>