From 2673834a9fb54a1ecc567c5d0e6cbb1e714b1ff5 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Fri, 20 Jun 2025 04:42:12 -0500
Subject: [PATCH] fix: Various Nuxt Upgrade Issues (#5545)

---
 frontend/components/Layout/DefaultLayout.vue |  7 +------
 frontend/nuxt.config.ts                      |  4 ++--
 frontend/pages/admin/site-settings.vue       |  6 ++++++
 frontend/pages/shopping-lists/[id].vue       | 10 +++++++---
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/components/Layout/DefaultLayout.vue b/frontend/components/Layout/DefaultLayout.vue
index 883afeb05..0a5052e66 100644
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -135,12 +135,7 @@ export default defineNuxtComponent({
     const isAdmin = computed(() => $auth.user.value?.admin);
     const route = useRoute();
     const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
-
-    const loggedInCookbooks = useCookbooks();
-    const publicCookbooks = usePublicCookbooks(groupSlug.value || "");
-    const cookbooks = computed(() =>
-      isOwnGroup.value ? loggedInCookbooks.cookbooks.value : publicCookbooks.cookbooks.value,
-    );
+    const { cookbooks } = isOwnGroup.value ? useCookbooks() : usePublicCookbooks(groupSlug.value || "");
 
     const cookbookPreferences = useCookbookPreferences();
     const { store: households } = isOwnGroup.value ? useHouseholdStore() : usePublicHouseholdStore(groupSlug.value || "");
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 3e865bbe5..b53194333 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -67,7 +67,7 @@ export default defineNuxtConfig({
     viewTransition: true,
   },
 
-  css: ["~/assets/css/main.css", "~/assets/style-overrides.scss"],
+  css: ["~/assets/css/main.css", "~/assets/css/fonts.css", "~/assets/style-overrides.scss"],
 
   runtimeConfig: {
     sessionPassword: process.env.SESSION_PASSWORD || "password-with-at-least-32-characters",
@@ -172,7 +172,7 @@ export default defineNuxtConfig({
 
   googleFonts: {
     fontsPath: "/assets/fonts",
-    download: true,
+    download: false, // Disable automatic downloading
     families: {
       Roboto: [100, 300, 400, 500, 700, 900],
     },
diff --git a/frontend/pages/admin/site-settings.vue b/frontend/pages/admin/site-settings.vue
index 67505e42a..1881e975b 100644
--- a/frontend/pages/admin/site-settings.vue
+++ b/frontend/pages/admin/site-settings.vue
@@ -251,6 +251,12 @@ export default defineNuxtComponent({
       layout: "admin",
     });
 
+    // For some reason the layout is not set automatically, so we set it here,
+    // even though it's defined above in the page meta.
+    onMounted(() => {
+      setPageLayout("admin");
+    });
+
     const { $globals } = useNuxtApp();
     const i18n = useI18n();
 
diff --git a/frontend/pages/shopping-lists/[id].vue b/frontend/pages/shopping-lists/[id].vue
index e2ba88379..e03d14d03 100644
--- a/frontend/pages/shopping-lists/[id].vue
+++ b/frontend/pages/shopping-lists/[id].vue
@@ -41,7 +41,9 @@
         <v-container>
           <v-row>
             <v-col
-              cols="3"
+              cols="12"
+              sm="4"
+              md="3"
               class="text-left"
             >
               <ButtonLink
@@ -51,8 +53,10 @@
               />
             </v-col>
             <v-col
-              cols="6"
-              class="d-none d-lg-flex justify-center"
+              cols="12"
+              sm="4"
+              md="6"
+              class="d-none d-sm-flex justify-center"
             >
               <v-img
                 max-height="100"