From ff2b25d8c7531cb21d905391269a4f92d9ef0136 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Wed, 14 Jan 2026 22:36:37 +0700
Subject: [PATCH] fix: catalog layout - header height, search width, overflow

---
 app/layouts/catalog.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/layouts/catalog.vue b/app/layouts/catalog.vue
index f6030ce..76d5aea 100644
--- a/app/layouts/catalog.vue
+++ b/app/layouts/catalog.vue
@@ -3,6 +3,7 @@
     <!-- Layer 1+2: MainNavigation + SubNavigation (slides up on scroll) -->
     <div
       class="fixed left-0 right-0 z-50"
+      :class="{ 'overflow-hidden': headerOffset < 0 }"
       :style="{ top: `${headerOffset}px` }"
     >
       <MainNavigation
@@ -39,7 +40,6 @@
 
     <!-- Layer 3: SearchBar (fixed, slides to top:0) - teleport target -->
     <div
-      id="catalog-searchbar"
       class="fixed left-0 right-0 z-40 bg-base-100 border-b border-base-300 flex items-center"
       :style="{ top: `${searchBarTop}px` }"
     >
@@ -50,7 +50,8 @@
       >
         <Icon :name="isCollapsed ? 'lucide:chevron-down' : 'lucide:chevron-up'" size="16" />
       </button>
-      <!-- SearchBar content teleported here -->
+      <!-- SearchBar content teleported here (flex-1 for full width) -->
+      <div id="catalog-searchbar" class="flex-1 min-w-0" />
     </div>
 
     <!-- Layer 4: Map (fixed, right side, to bottom) - teleport target -->
@@ -108,7 +109,10 @@ const route = useRoute()
 const localePath = useLocalePath()
 const { t } = useI18n()
 
-// Smooth collapsible header - headerHeight = 112px (64 + 48), searchBarHeight = 48px
+// Smooth collapsible header
+// MainNav: h-16 (64px) + border (1px) = 65px
+// SubNav: py-2 (16px) + links (36px) + border (1px) = 53px
+// Total header = 65 + 53 = 118px, SearchBar = 48px
 const {
   headerOffset,
   searchBarTop,
@@ -117,7 +121,7 @@ const {
   isCollapsed,
   expand,
   collapse
-} = useScrollCollapse(112, 48)
+} = useScrollCollapse(118, 48)
 
 // Mobile view toggle
 const mobileView = ref<'list' | 'map'>('list')