Fix catalog UI issues
All checks were successful
Build Docker Image / build (push) Successful in 3m31s

1. Fix navbar height - prevent tag wrapping with overflow-hidden
2. Fix translation keys for mode labels and search form labels
3. Fix SelectionPanel - white glass header/search, no top gap
4. Map click fills active selector - emit full properties from map
This commit is contained in:
Ruslan Bakiev
2026-01-24 09:47:41 +07:00
parent 3140226bc3
commit 2a607d0d2d
5 changed files with 68 additions and 29 deletions

View File

@@ -20,7 +20,7 @@
: (glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
@click="$emit('set-catalog-mode', 'explore')"
>
TradeScanner
{{ $t('catalog.modes.explore') }}
</button>
<button
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
@@ -29,7 +29,7 @@
: (glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
@click="$emit('set-catalog-mode', 'quote')"
>
Search
{{ $t('catalog.modes.quote') }}
</button>
</nav>
</div>
@@ -44,7 +44,7 @@
class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@click="$emit('edit-token', 'product')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
<div class="text-xs text-base-content/60">{{ $t('catalog.filters.product') }}</div>
<div class="font-medium truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
</button>
<!-- Hub segment -->
@@ -52,7 +52,7 @@
class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'hub')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
<div class="text-xs text-base-content/60">{{ $t('catalog.filters.hub') }}</div>
<div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
</button>
<!-- Quantity segment -->
@@ -60,7 +60,7 @@
class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'quantity')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
<div class="text-xs text-base-content/60">{{ $t('catalog.filters.quantity') }}</div>
<div class="font-medium text-base-content">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
</button>
<!-- Search button inside -->
@@ -83,8 +83,8 @@
>
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
<!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
<!-- Tokens + input inline (no wrap to prevent height change) -->
<div class="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
<!-- Active filter tokens (outline style with icon in circle) -->
<div
v-for="token in activeTokens"