From 196a5e206823c0b7a968af67ec7e4eac9140c49d Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Thu, 28 May 2026 22:57:21 -0500
Subject: [PATCH] fix: resolve mobile layout issues and redesign catalog header

- Add 'app' prop to NavBar for proper Vuetify layout integration
- Fix mobile z-index: page-header now compensates for NavBar height (64px)
- Fix cart visibility: position cart above footer instead of hidden underneath
- Redesign header: white background with subtle shadow instead of blue gradient
- Expand catalog layout: increase catalog width (md=10 lg=9) for better content space
- Optimize mobile search: expand search field to full width, hide title on mobile
- Adjust mobile padding: increase to 100px to account for footer + collapsed cart
---
 src/components/NavBar.vue |  2 +-
 src/pages/catalog.vue     | 45 ++++++++++++++++++++++-----------------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index e0fa551..4551b48 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-app-bar color="primary" prominent>
+    <v-app-bar color="primary" prominent app>
     <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
     <v-toolbar-title>Menu</v-toolbar-title>
     <v-spacer></v-spacer>
diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
index 4c07e16..a599d56 100644
--- a/src/pages/catalog.vue
+++ b/src/pages/catalog.vue
@@ -8,30 +8,30 @@
     ></div>
 
     <v-row>
-      <v-col cols="12" md="9" lg="7" :class="{ 'pb-mobile-cart': isMobile }">
+      <v-col cols="12" md="10" lg="9" :class="{ 'pb-mobile-cart': isMobile }">
         <v-sheet
           class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg"
         >
-          <v-icon size="28" color="white" class="mr-2 d-sm-none"
+          <v-icon size="28" color="primary" class="mr-2 d-sm-none flex-shrink-0"
             >mdi-store</v-icon
           >
-          <v-icon size="36" color="white" class="mr-3 d-none d-sm-inline"
+          <v-icon size="36" color="primary" class="mr-3 d-none d-sm-inline flex-shrink-0"
             >mdi-store</v-icon
           >
           <div
             class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4"
           >
-            <div class="flex-shrink-0">
+            <div class="flex-shrink-0 d-none d-sm-block">
               <h1
-                class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-white mb-0"
+                class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-primary mb-0"
               >
                 Catálogo
               </h1>
-              <p class="text-body-2 text-white text-medium-emphasis mb-0">
+              <p class="text-body-2 text-medium-emphasis mb-0">
                 Explora y agrega productos a tu compra
               </p>
             </div>
-            <v-spacer></v-spacer>
+            <v-spacer class="d-none d-sm-flex"></v-spacer>
             <v-text-field
               v-model="searchQuery"
               prepend-inner-icon="mdi-magnify"
@@ -41,7 +41,7 @@
               clearable
               hide-details
               single-line
-              class="search-field"
+              class="search-field flex-grow-1 flex-sm-grow-0"
             />
           </div>
         </v-sheet>
@@ -109,7 +109,7 @@
         />
       </v-col>
 
-      <v-col cols="12" md="3" lg="5">
+      <v-col cols="12" md="2" lg="3">
         <div
           class="cart-sidebar"
           :class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
@@ -530,15 +530,16 @@ export default {
   position: sticky;
   top: 80px;
   z-index: 5;
-  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
-  color: white !important;
+  background: white !important;
+  color: #1565c0 !important;
   overflow: visible;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
 }
 
-/* Mobile: Header sticky al top, z-index menor que el cart */
+/* Mobile: Header sticky compensating for NavBar height, z-index menor que el cart */
 @media (max-width: 959px) {
   .page-header {
-    top: 0;
+    top: 64px;
     border-radius: 0 !important;
     z-index: 900;
   }
@@ -552,28 +553,33 @@ export default {
 
 /* Estilos profundos para el campo de búsqueda de Vuetify */
 .page-header :deep(.v-field) {
-  background-color: rgba(255, 255, 255, 0.15) !important;
+  background-color: #f5f5f5 !important;
   border-radius: 8px;
   transition: background-color 0.2s ease;
 }
 
 .page-header :deep(.v-field:hover),
 .page-header :deep(.v-field--focused) {
-  background-color: rgba(255, 255, 255, 0.25) !important;
+  background-color: #e0e0e0 !important;
 }
 
 .page-header :deep(.v-field__input) {
-  color: white !important;
+  color: #1565c0 !important;
 }
 
 .page-header :deep(.v-field__input::placeholder) {
-  color: rgba(255, 255, 255, 0.7) !important;
+  color: rgba(0, 0, 0, 0.5) !important;
 }
 
 @media (max-width: 559px) {
   .page-header .search-field :deep(.v-field__input) {
     font-size: 0.875rem;
   }
+  
+  .page-header .search-field {
+    width: 100%;
+    max-width: 100%;
+  }
 }
 
 @media (min-width: 560px) {
@@ -594,8 +600,9 @@ export default {
    CARRITO FLOTANTE (MOBILE FIRST)
    ============================================ */
 .cart-sidebar {
+  --footer-height: 40px;
   position: fixed;
-  bottom: 0;
+  bottom: var(--footer-height);
   left: 0;
   right: 0;
   z-index: 1000;
@@ -631,7 +638,7 @@ export default {
 
 /* Espacio inferior para evitar que productos queden ocultos bajo el cart */
 .pb-mobile-cart {
-  padding-bottom: 80px !important;
+  padding-bottom: 100px !important;
 }
 
 /* ============================================