routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/components/VBottomSheet/VBottomSheet.css

@@ -0,0 +1,44 @@
+@layer vuetify-final.transitions {
+  .bottom-sheet-transition-enter-from {
+    transform: translateY(100%);
+  }
+  .bottom-sheet-transition-leave-to {
+    transform: translateY(100%);
+  }
+}
+@layer vuetify-components {
+  .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
+    align-self: flex-end;
+    border-radius: 0;
+    flex: 0 1 auto;
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+    margin-bottom: 0;
+    transition-duration: 0.2s;
+    width: 100%;
+    max-width: 100%;
+    overflow: visible;
+  }
+  .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
+    box-shadow: 0px 2px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 6px 10px 4px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
+    --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 8%, transparent);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
+      transition: none;
+    }
+  }
+  .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card,
+  .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-sheet {
+    border-radius: 0;
+  }
+  .v-bottom-sheet.v-bottom-sheet--inset {
+    max-width: none;
+  }
+  @media (min-width: 600px) {
+    .v-bottom-sheet.v-bottom-sheet--inset {
+      max-width: 70%;
+    }
+  }
+}