fix: Search layout fixes (#7459)

.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
 

frontend/app/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -7,12 +7,13 @@
       content-class="top-dialog"
       :scrollable="false"
     >
-      <v-app-bar
+      <v-card
-        sticky
-        dark
-        color="primary-lighten-1 top-0 position-relative left-0"
         :rounded="!$vuetify.display.xs"
-        style="width: 100%;"
+        :loading="loading"
+      >
+        <v-toolbar
+          dark
+          color="primary-lighten-1"
         >
           <v-text-field
             id="arrow-search"
@@ -41,19 +42,15 @@
               {{ $globals.icons.close }}
             </v-icon>
           </v-btn>
-      </v-app-bar>
+        </v-toolbar>
-      <v-card
+
-        class="position-relative mt-1 pa-1 scroll"
-        max-height="700px"
-        relative
-        :loading="loading"
-      >
         <v-card-actions>
           <div class="mr-auto">
             {{ $t("search.results") }}
           </div>
         </v-card-actions>
 
+        <div class="scroll pa-1" style="max-height: 700px;">
           <RecipeCardMobile
             v-for="(recipe, index) in search.data.value"
             :key="index"
@@ -67,6 +64,7 @@
             :recipe-id="recipe.id ?? ''"
             v-bind="$attrs.selected ? { selected: () => handleSelect(recipe) } : {}"
           />
+        </div>
       </v-card>
     </v-dialog>
   </div>

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