Book form: make buttons work on mobile view

front/src/DateWidget.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  dateinputid: String,
+  dateinputlabel: String,
+  initdate: String,
+  isHorizontal: Boolean,
+})
+defineEmits(['onDateChange'])
+
+const today = new Date().toISOString().slice(0, 10)
+</script>
+
+<template>
+  <label class="datelabel" :class="props.isHorizontal ? 'pr-2' : 'pb-1'" :for="props.dateinputid">
+    {{ $t(props.dateinputlabel) }}
+  </label>
+  <input
+    class="datepicker has-background-dark has-text-light"
+    :id="props.dateinputid"
+    type="date"
+    @change="(e) => $emit('onDateChange', e.target.value)"
+    :value="props.initdate"
+    :max="today"
+  />
+</template>
+
+<style scoped>
+.datelabel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 26px;
+  border: none;
+}
+
+.datepicker {
+  font-size: 26px;
+  border-radius: 5px;
+}
+</style>