UI fixes: header height, map color, panel scroll
All checks were successful
Build Docker Image / build (push) Successful in 3m10s

- 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
This commit is contained in:
Ruslan Bakiev
2026-01-23 10:53:21 +07:00
parent fc6ce31659
commit 5258347ccb
4 changed files with 9 additions and 9 deletions

View File

@@ -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,

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>