From 608dbaa4c1c8ab76ef00e602764065bc103deaa7 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Wed, 3 Sep 2025 03:36:42 -0500
Subject: [PATCH] fix: Incorrect Usage of $vuetify.display (#6066)

---
 .../components/Domain/Recipe/RecipeCardSection.vue     |  4 ++--
 .../components/Domain/Recipe/RecipePage/RecipePage.vue | 10 +++++-----
 .../RecipePageParts/RecipePageInfoCardImage.vue        |  4 ++--
 .../components/Domain/Recipe/RecipeTimelineItem.vue    |  5 +++--
 frontend/components/Layout/DefaultLayout.vue           |  5 +++--
 frontend/components/global/BaseStatCard.vue            |  4 ++--
 frontend/layouts/admin.vue                             |  5 +++--
 frontend/pages/g/[groupSlug]/recipes/finder/index.vue  |  4 ++--
 8 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index 712789675..f9fb6fe4b 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -199,7 +199,7 @@ const emit = defineEmits<{
   appendRecipes: [recipes: Recipe[]];
 }>();
 
-const { $vuetify } = useNuxtApp();
+const display = useDisplay();
 const preferences = useUserSortPreferences();
 
 const EVENTS = {
@@ -215,7 +215,7 @@ const $auth = useMealieAuth();
 const { $globals } = useNuxtApp();
 const { isOwnGroup } = useLoggedInState();
 const useMobileCards = computed(() => {
-  return $vuetify.display.smAndDown.value || preferences.value.useMobileCards;
+  return display.smAndDown.value || preferences.value.useMobileCards;
 });
 
 const displayTitleIcon = computed(() => {
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index b55487ed0..ad6e08a5a 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }">
-      <v-card :flat="$vuetify.display.smAndDown.value" class="d-print-none">
+    <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown }">
+      <v-card :flat="$vuetify.display.smAndDown" class="d-print-none">
         <RecipePageHeader
           :recipe="recipe"
           :recipe-scale="scale"
@@ -107,7 +107,7 @@
           <v-divider />
         </v-col>
         <v-col class="overflow-y-auto"
-        :class="$vuetify.display.smAndDown.value ? 'py-2': 'py-6'"
+        :class="$vuetify.display.smAndDown ? 'py-2': 'py-6'"
         style="height: 100%" cols="12" sm="7">
           <h2 class="text-h5 px-4 font-weight-medium opacity-80">
             {{ $t('recipe.instructions') }}
@@ -188,7 +188,7 @@ import { useNavigationWarning } from "~/composables/use-navigation-warning";
 
 const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
 
-const { $vuetify } = useNuxtApp();
+const display = useDisplay();
 const i18n = useI18n();
 const $auth = useMealieAuth();
 const route = useRoute();
@@ -278,7 +278,7 @@ async function deleteRecipe() {
  */
 const landscape = computed(() => {
   const preferLandscape = recipe.value.settings?.landscapeView;
-  const smallScreen = !$vuetify.display.smAndUp.value;
+  const smallScreen = !display.smAndUp.value;
 
   if (preferLandscape) {
     return true;
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
index 5912d99a9..9b592c4f9 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: undefined,
 });
 
-const { $vuetify } = useNuxtApp();
+const display = useDisplay();
 const { recipeImage } = useStaticRoutes();
 const { imageKey } = usePageState(props.recipe.slug);
 const { user } = usePageUser();
@@ -42,7 +42,7 @@ if (user) {
 
 const hideImage = ref(false);
 const imageHeight = computed(() => {
-  return $vuetify.display.xs.value ? "200" : "400";
+  return display.xs.value ? "200" : "400";
 });
 
 const recipeImageUrl = computed(() => {
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index 4a6aa3ebc..9edf93485 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -117,7 +117,8 @@ defineEmits<{
   delete: [];
 }>();
 
-const { $vuetify, $globals } = useNuxtApp();
+const { $globals } = useNuxtApp();
+const display = useDisplay();
 const { recipeTimelineEventImage } = useStaticRoutes();
 const { eventTypeOptions } = useTimelineEventTypes();
 
@@ -127,7 +128,7 @@ const route = useRoute();
 const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
 
 const useMobileFormat = computed(() => {
-  return $vuetify.display.smAndDown.value;
+  return display.smAndDown.value;
 });
 
 const attrs = computed(() => {
diff --git a/frontend/components/Layout/DefaultLayout.vue b/frontend/components/Layout/DefaultLayout.vue
index 7445dc4be..c1a968465 100644
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -128,7 +128,8 @@ import type { HouseholdSummary } from "~/lib/api/types/household";
 export default defineNuxtComponent({
   setup() {
     const i18n = useI18n();
-    const { $globals, $vuetify } = useNuxtApp();
+    const { $globals } = useNuxtApp();
+    const display = useDisplay();
     const $auth = useMealieAuth();
     const { isOwnGroup } = useLoggedInState();
 
@@ -196,7 +197,7 @@ export default defineNuxtComponent({
 
     const sidebar = ref<boolean>(false);
     onMounted(() => {
-      sidebar.value = $vuetify.display.mdAndUp.value;
+      sidebar.value = display.mdAndUp.value;
     });
 
     function cookbookAsLink(cookbook: ReadCookBook): SideBarLink {
diff --git a/frontend/components/global/BaseStatCard.vue b/frontend/components/global/BaseStatCard.vue
index 582cbb3f9..f48932520 100644
--- a/frontend/components/global/BaseStatCard.vue
+++ b/frontend/components/global/BaseStatCard.vue
@@ -90,13 +90,13 @@ export default defineNuxtComponent({
     },
   },
   setup() {
-    const { $vuetify } = useNuxtApp();
+    const display = useDisplay();
     const hasHeading = computed(() => false);
     const hasAltHeading = computed(() => false);
     const classes = computed(() => {
       return {
         "v-card--material--has-heading": hasHeading,
-        "mt-3": $vuetify.display.name.value === "xs" || $vuetify.display.name.value === "sm",
+        "mt-3": display.name.value === "xs" || display.name.value === "sm",
       };
     });
 
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index 36f214dff..2c8bdca97 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -38,11 +38,12 @@ import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
 import type { SidebarLinks } from "~/types/application-types";
 
 const i18n = useI18n();
-const { $globals, $vuetify } = useNuxtApp();
+const display = useDisplay();
+const { $globals } = useNuxtApp();
 
 const sidebar = ref<boolean>(false);
 onMounted(() => {
-  sidebar.value = !$vuetify.display.md.value;
+  sidebar.value = !display.md.value;
 });
 
 const topLinks: SidebarLinks = [
diff --git a/frontend/pages/g/[groupSlug]/recipes/finder/index.vue b/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
index d5993d26c..43903a8f8 100644
--- a/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
+++ b/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
@@ -428,7 +428,7 @@ interface RecipeSuggestions {
 export default defineNuxtComponent({
   components: { QueryFilterBuilder, RecipeSuggestion, SearchFilter },
   setup() {
-    const { $vuetify } = useNuxtApp();
+    const display = useDisplay();
     const i18n = useI18n();
     const $auth = useMealieAuth();
     const route = useRoute();
@@ -437,7 +437,7 @@ export default defineNuxtComponent({
       title: i18n.t("recipe-finder.recipe-finder"),
     });
 
-    const useMobile = computed(() => $vuetify.display.smAndDown.value);
+    const useMobile = computed(() => display.smAndDown.value);
 
     const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
     const { isOwnGroup } = useLoggedInState();