From 5258347ccb6426a6f893b3078b097848e3553cbb Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:53:21 +0700
Subject: [PATCH] UI fixes: header height, map color, panel scroll

- MainNavigation: fixed min-height to prevent jumping on mode switch
- CatalogMap: default pointColor changed from green to orange (#f97316)
- CatalogPage: panel scroll on entire container, not inner
- SelectionPanel: sticky header and search, removed inner scroll
---
 app/components/catalog/CatalogMap.vue        |  2 +-
 app/components/catalog/SelectionPanel.vue    | 12 ++++++------
 app/components/navigation/MainNavigation.vue |  2 +-
 app/components/page/CatalogPage.vue          |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/components/catalog/CatalogMap.vue b/app/components/catalog/CatalogMap.vue
index 8699df4..2d51278 100644
--- a/app/components/catalog/CatalogMap.vue
+++ b/app/components/catalog/CatalogMap.vue
@@ -51,7 +51,7 @@ const props = withDefaults(defineProps<{
   initialCenter?: [number, number]
   initialZoom?: number
 }>(), {
-  pointColor: '#10b981',
+  pointColor: '#f97316',
   initialCenter: () => [37.64, 55.76],
   initialZoom: 2,
   useServerClustering: false,
diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index c5b4741..3dec17e 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="flex flex-col h-full gap-3">
-    <!-- Header -->
-    <div class="flex items-center justify-between flex-shrink-0">
+  <div class="flex flex-col gap-3">
+    <!-- Header (sticky at top) -->
+    <div class="flex items-center justify-between sticky top-0 bg-base-300/95 -mx-4 px-4 py-2 -mt-4 z-10">
       <h3 class="font-semibold text-lg">{{ title }}</h3>
       <button class="btn btn-ghost btn-sm btn-circle" @click="emit('close')">
         <Icon name="lucide:x" size="18" />
       </button>
     </div>
 
-    <!-- Search input -->
-    <div class="flex-shrink-0">
+    <!-- Search input (sticky below header) -->
+    <div class="sticky top-10 bg-base-300/95 -mx-4 px-4 pb-2 z-10">
       <input
         v-model="searchQuery"
         type="text"
@@ -19,7 +19,7 @@
     </div>
 
     <!-- List -->
-    <div class="flex-1 overflow-y-auto -mx-1 px-1">
+    <div class="-mx-1 px-1">
       <div v-if="loading" class="flex items-center justify-center py-8">
         <span class="loading loading-spinner loading-md" />
       </div>
diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 7a04da5..b05a4bd 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -30,7 +30,7 @@
       </div>
 
       <!-- Center: Search input (transforms based on mode) -->
-      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
+      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 min-h-[72px] justify-center">
         <!-- Quote mode: Segmented input like Airbnb -->
         <template v-if="catalogMode === 'quote'">
           <div class="flex items-center gap-3 w-full">
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 073422e..71d03ef 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -69,7 +69,7 @@
       v-if="showPanel"
       class="absolute top-20 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
     >
-      <div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
+      <div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-y-auto">
         <slot name="panel" />
       </div>
     </div>