fix: Incorrect Usage of $vuetify.display (#6066)

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(() => {

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;

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(() => {

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(() => {

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 {

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",
       };
     });