Use footer instead of bottom sheet for date select

aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDateSelect.vue

@@ -7,14 +7,6 @@ export default {
   components: {
     DateField,
   },
-  mounted() {
-    // Vuetify uses the hideScroll method to disable scrolling by setting an event listener
-    // to the window. As event listeners can only be removed by referencing the listener
-    // method and because vuetify this method is called on every state change of the dialog,
-    // we simply replace the method in this component instance
-    // https://edugit.org/AlekSIS/official/AlekSIS-Core/-/commit/c6048ba9ad8345e98d896801424f5292bb307e2e
-    this.$refs.sheet.hideScroll = this.$refs.sheet.showScroll;
-  },
   props: {
     value: {
       type: String,
@@ -57,43 +49,44 @@ export default {
 </script>
 
 <template>
-  <v-bottom-sheet
-    :value="true"
-    persistent
-    hide-overlay
-    no-click-animation
-    :retain-focus="false"
-    ref="sheet"
-    class="rounded-t-xl rounded-b-0"
+  <v-footer
+    app
+    inset
+    padless
+    id="date-select-footer"
   >
-    <v-card>
+    <v-card tile class="full-width">
       <v-card-title id="content">
-        <div class="d-flex align-center justify-space-between full-width">
+        <div class="d-flex align-center justify-center full-width">
           <v-btn icon large class="me-4" @click="handleClick(PREV)">
             <v-icon>$prev</v-icon>
           </v-btn>
-          <date-field
-            solo-inverted
-            flat
-            hide-details
-            :value="value"
-            @input="$emit('input', $event)"
-            :label="$t('alsijil.coursebook.date_select.label')"
-            :disabled="loading"
-            readonly
-          />
+          <div class="flex-grow-0">
+            <date-field
+              solo-inverted
+              flat
+              hide-details
+              :value="value"
+              @input="$emit('input', $event)"
+              :label="$t('alsijil.coursebook.date_select.label')"
+              :disabled="loading"
+              readonly
+            />
+          </div>
           <v-btn icon large class="ms-4" @click="handleClick(NEXT)">
             <v-icon>$next</v-icon>
           </v-btn>
         </div>
       </v-card-title>
     </v-card>
-  </v-bottom-sheet>
+  </v-footer>
 </template>
 
 <style scoped>
 #content {
   margin: auto;
-  max-width: 500px;
+}
+#date-select-footer {
+  z-index: 10;
 }
 </style>