From 7968a32fd46f0e5f63872a5aaf80a25c3b269b60 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 16 Jan 2026 16:27:39 +0700
Subject: [PATCH] Fix map layout: use sticky instead of fixed, add rounded
 corners and shadow

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

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index cb353d5..766b62b 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -63,9 +63,9 @@
             </Stack>
           </div>
 
-          <!-- Right: Map (fixed position) -->
-          <div class="w-3/5 relative">
-            <div class="fixed right-0 w-3/5 overflow-hidden" :style="mapStyle">
+          <!-- Right: Map (sticky, inside content container) -->
+          <div class="w-3/5">
+            <div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
               <!-- Search with map checkbox -->
               <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
                 <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
@@ -238,10 +238,10 @@ const searchBarStyle = computed(() => ({
   top: `${searchBarTop.value}px`
 }))
 
-// Map style - smooth pixel positioning
+// Map style - smooth pixel positioning with bottom padding
 const mapStyle = computed(() => ({
   top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`,
-  height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px)`
+  height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px - 16px)`
 }))
 
 const emit = defineEmits<{