Stack nav bar on smaller screens

Wraps the app bar navigation to a second row on lgAndDown breakpoint
to prevent overflow on narrow viewports.

Author: Nils Bars

spa-frontend/src/layouts/DefaultLayout.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useDisplay } from 'vuetify';
 import { useNavStore } from '../stores/nav';
 import { useTheme } from '../theme/useTheme';
 
 const nav = useNavStore();
 const theme = useTheme();
+const display = useDisplay();
 
 // import.meta.env.DEV is true when Vite serves the app via `vite dev`
 // (HMR); a production `vite build` bakes this to false. The banner is
@@ -32,6 +34,9 @@ const themeLabel = computed(() => {
       return 'Theme: auto — follow system (click for light)';
   }
 });
+
+const stackedNav = computed(() => display.lgAndDown.value);
+const appBarHeight = computed(() => (stackedNav.value ? 112 : 64));
 </script>
 
 <template>
@@ -49,7 +54,12 @@ const themeLabel = computed(() => {
         this instance publicly.
       </span>
     </v-system-bar>
-    <v-app-bar color="background" border="b" class="term-appbar">
+    <v-app-bar
+      color="background"
+      border="b"
+      :height="appBarHeight"
+      :class="['term-appbar', { 'term-appbar--stacked': stackedNav }]"
+    >
       <template #prepend>
         <v-app-bar-title class="term-appbar-title">
           <span class="term-hot">{{ nav.courseName }}</span>

spa-frontend/src/theme/theme.css

@@ -182,6 +182,27 @@ body.theme-light .term-live-dot {
   pointer-events: auto;
 }
 
+.term-appbar--stacked .v-toolbar__content {
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: 0.35rem;
+  padding-top: 0.45rem;
+  padding-bottom: 0.45rem;
+}
+
+.term-appbar--stacked .term-nav-center {
+  position: static;
+  left: auto;
+  top: auto;
+  transform: none;
+  order: 3;
+  width: 100%;
+  justify-content: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+  margin-top: 0.2rem;
+}
+
 /* Give every Vuetify input a little more vertical breathing room so
    error messages (rendered in .v-input__details) never crowd the next
    field. Applies across every form in the SPA. */