From 4e5a2f9fb5e03677a8bd56d2338db6765f589451 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 13 Apr 2026 10:56:19 -0500
Subject: [PATCH] fix: Search layout fixes (#7459)

---
 .github/copilot-instructions.md               |   4 +-
 .../Domain/Recipe/RecipeDialogSearch.vue      | 100 +++++++++---------
 .../app/components/Domain/SearchFilter.vue    |   2 -
 3 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 3f3b7287c..0a695bc2f 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -2,7 +2,7 @@
 
 ## Project Overview
 
-Mealie is a self-hosted recipe manager, meal planner, and shopping list application with a FastAPI backend (Python 3.12) and Nuxt 3 frontend (Vue 3 + TypeScript). It uses SQLAlchemy ORM with support for SQLite and PostgreSQL databases.
+Mealie is a self-hosted recipe manager, meal planner, and shopping list application with a FastAPI backend (Python 3.12) and Nuxt 4 frontend (Vue 3 + TypeScript). It uses SQLAlchemy ORM with support for SQLite and PostgreSQL databases.
 
 **Development vs Production:**
 - **Development:** Frontend (port 3000) and backend (port 9000) run as separate processes
@@ -51,7 +51,7 @@ Mealie is a self-hosted recipe manager, meal planner, and shopping list applicat
 - Use `useAuthBackend()` for authentication state, `useMealieAuth()` for user management
 
 **State Management:**
-- Nuxt 3 composables for state (no Vuex)
+- Nuxt 4 composables for state (no Vuex)
 - Auth state via `use-mealie-auth.ts` composable
 - Prefer composables over global state stores
 
diff --git a/frontend/app/components/Domain/Recipe/RecipeDialogSearch.vue b/frontend/app/components/Domain/Recipe/RecipeDialogSearch.vue
index f845df962..5cebf6b37 100644
--- a/frontend/app/components/Domain/Recipe/RecipeDialogSearch.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeDialogSearch.vue
@@ -7,66 +7,64 @@
       content-class="top-dialog"
       :scrollable="false"
     >
-      <v-app-bar
-        sticky
-        dark
-        color="primary-lighten-1 top-0 position-relative left-0"
-        :rounded="!$vuetify.display.xs"
-        style="width: 100%;"
-      >
-        <v-text-field
-          id="arrow-search"
-          v-model="search.query.value"
-          autofocus
-          variant="solo"
-          flat
-          autocomplete="off"
-          bg-color="primary-lighten-1"
-          color="white"
-          density="compact"
-          class="mx-2 arrow-search"
-          hide-details
-          single-line
-          :placeholder="$t('search.search')"
-          :prepend-inner-icon="$globals.icons.search"
-        />
-
-        <v-btn
-          v-if="$vuetify.display.xs"
-          icon
-          size="x-small"
-          @click="dialog = false"
-        >
-          <v-icon>
-            {{ $globals.icons.close }}
-          </v-icon>
-        </v-btn>
-      </v-app-bar>
       <v-card
-        class="position-relative mt-1 pa-1 scroll"
-        max-height="700px"
-        relative
+        :rounded="!$vuetify.display.xs"
         :loading="loading"
       >
+        <v-toolbar
+          dark
+          color="primary-lighten-1"
+        >
+          <v-text-field
+            id="arrow-search"
+            v-model="search.query.value"
+            autofocus
+            variant="solo"
+            flat
+            autocomplete="off"
+            bg-color="primary-lighten-1"
+            color="white"
+            density="compact"
+            class="mx-2 arrow-search"
+            hide-details
+            single-line
+            :placeholder="$t('search.search')"
+            :prepend-inner-icon="$globals.icons.search"
+          />
+
+          <v-btn
+            v-if="$vuetify.display.xs"
+            icon
+            size="x-small"
+            @click="dialog = false"
+          >
+            <v-icon>
+              {{ $globals.icons.close }}
+            </v-icon>
+          </v-btn>
+        </v-toolbar>
+
         <v-card-actions>
           <div class="mr-auto">
             {{ $t("search.results") }}
           </div>
         </v-card-actions>
 
-        <RecipeCardMobile
-          v-for="(recipe, index) in search.data.value"
-          :key="index"
-          :tabindex="index"
-          class="ma-1 arrow-nav"
-          :name="recipe.name ?? ''"
-          :description="recipe.description ?? ''"
-          :slug="recipe.slug ?? ''"
-          :rating="recipe.rating ?? 0"
-          :image="recipe.image"
-          :recipe-id="recipe.id ?? ''"
-          v-bind="$attrs.selected ? { selected: () => handleSelect(recipe) } : {}"
-        />
+        <div class="scroll pa-1" style="max-height: 700px;">
+          <RecipeCardMobile
+            v-for="(recipe, index) in search.data.value"
+            :key="index"
+            :tabindex="index"
+            class="ma-1 arrow-nav"
+            :name="recipe.name ?? ''"
+            :description="recipe.description ?? ''"
+            :slug="recipe.slug ?? ''"
+            :rating="recipe.rating ?? 0"
+            :image="recipe.image"
+            :recipe-id="recipe.id ?? ''"
+            v-bind="$attrs.selected ? { selected: () => handleSelect(recipe) } : {}"
+          />
+        </div>
       </v-card>
     </v-dialog>
   </div>
diff --git a/frontend/app/components/Domain/SearchFilter.vue b/frontend/app/components/Domain/SearchFilter.vue
index 090a07111..020fd38cb 100644
--- a/frontend/app/components/Domain/SearchFilter.vue
+++ b/frontend/app/components/Domain/SearchFilter.vue
@@ -79,7 +79,6 @@
               <v-virtual-scroll
                 :items="filtered"
                 height="300"
-                item-height="51"
               >
                 <template #default="{ item }">
                   <v-list-item
@@ -108,7 +107,6 @@
               <v-virtual-scroll
                 :items="filtered"
                 height="300"
-                item-height="51"
               >
                 <template #default="{ item }">
                   <v-list-item