From b9f44ecaf4b4fdac873a3cc0c97622bf18d2508e Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 15 Jan 2026 12:15:48 +0700
Subject: [PATCH] Fix SearchBar height and remove padding gaps

---
 app/components/page/CatalogPage.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 9e92b5a..9e1c873 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -13,8 +13,8 @@
     <!-- Content -->
     <template v-else>
       <!-- Search bar slot (sticky third bar - like navigation) -->
-      <div v-if="$slots.searchBar" class="sticky z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 pt-4 pb-2 bg-base-100 border-b border-base-300" :style="searchBarStyle">
-        <div class="flex items-center gap-2">
+      <div v-if="$slots.searchBar" class="sticky z-20 h-16 -mx-3 lg:-mx-6 px-3 lg:px-6 bg-base-100 border-b border-base-300" :style="searchBarStyle">
+        <div class="flex items-center gap-2 h-full">
           <!-- Expand button - appears when header collapsed -->
           <button
             v-if="isCollapsed"
@@ -227,8 +227,8 @@ const props = withDefaults(defineProps<{
 })
 
 // Smooth scroll collapse - pixel values for smooth animation
-// MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 56px
-const { searchBarTop, mapTop, isCollapsed, expand } = useScrollCollapse(118, 56)
+// MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 64px
+const { searchBarTop, mapTop, isCollapsed, expand } = useScrollCollapse(118, 64)
 
 const slots = useSlots()
 const hasSearchBar = computed(() => !!slots.searchBar)
@@ -241,9 +241,7 @@ const searchBarStyle = computed(() => ({
 // Map style - smooth pixel positioning
 const mapStyle = computed(() => ({
   top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`,
-  height: hasSearchBar.value
-    ? `calc(100vh - ${mapTop.value}px - 1rem)`
-    : `calc(100vh - ${searchBarTop.value}px - 1rem)`
+  height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px)`
 }))
 
 const emit = defineEmits<{