Reduced datetime picker width

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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

js/src/components/Event/DateTimePicker.vue

@@ -12,26 +12,32 @@
 ```
 </docs>
 <template>
-    <b-field grouped horizontal :label="label">
+    <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"
-                expanded
                         :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"
-                expanded
                         size="is-small"
                         inline>
                 </b-timepicker>
-    </b-field>
+            </div>
+        </div>
+    </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';