From 71d35476c29e8c190590c7ff2be306d90609bd56 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 12 Mar 2026 20:46:48 +0700
Subject: [PATCH] fix: normalize quote capsule height and labels

---
 app/components/navigation/MainNavigation.vue | 28 +++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index b5c062a..59bbe1e 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -136,39 +136,36 @@
         <!-- Quote mode: Step-based capsule navigation (like logistics) -->
         <template v-else-if="isQuoteModeActive">
           <div
-            class="flex items-center rounded-full pill-glass overflow-hidden"
+            class="flex h-12 items-center overflow-hidden rounded-full pill-glass"
             :class="searchCapsuleClass"
             :style="searchCapsuleStyle"
           >
             <!-- Product segment -->
             <NuxtLink
               :to="localePath('/catalog/product')"
-              class="flex-1 px-4 py-2 text-left hover:bg-white/10 rounded-l-full transition-colors min-w-0"
+              class="flex h-full min-w-0 flex-1 items-center px-4 text-left text-sm font-medium transition-colors hover:bg-white/10"
             >
-              <span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.product') }}</span>
-              <div class="font-medium truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
+              <span class="truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</span>
             </NuxtLink>
-            <div class="w-px h-8 bg-base-300/40 self-center" />
+            <div class="h-6 w-px self-center bg-base-300/40" />
             <!-- Hub segment -->
             <NuxtLink
               :to="localePath('/catalog/destination')"
-              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
+              class="flex h-full min-w-0 flex-1 items-center px-4 text-left text-sm font-medium transition-colors hover:bg-white/10"
             >
-              <span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.hub') }}</span>
-              <div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
+              <span class="truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</span>
             </NuxtLink>
-            <div class="w-px h-8 bg-base-300/40 self-center" />
+            <div class="h-6 w-px self-center bg-base-300/40" />
             <!-- Quantity segment -->
             <NuxtLink
               :to="localePath('/catalog/quantity')"
-              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
+              class="flex h-full min-w-0 flex-1 items-center px-4 text-left text-sm font-medium transition-colors hover:bg-white/10"
             >
-              <span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.quantity') }}</span>
-              <div class="font-medium truncate text-base-content">{{ quantity || '—' }} {{ quantity ? $t('units.t') : '' }}</div>
+              <span class="truncate text-base-content">{{ quantityLabel }}</span>
             </NuxtLink>
             <!-- Search button -->
             <button
-              class="btn btn-primary btn-circle m-1"
+              class="btn btn-primary btn-circle btn-sm m-1"
               @click="navigateToSearch"
             >
               <Icon name="lucide:search" size="18" />
@@ -556,6 +553,11 @@ const searchCapsuleStyle = computed(() => {
   return { top: `${landingCapsuleTop.value}px` }
 })
 
+const quantityLabel = computed(() => {
+  if (!props.quantity) return t('catalog.quote.enterQty', 'Введите количество')
+  return `${props.quantity} ${t('units.t')}`
+})
+
 // Use white text on dark backgrounds (collapsed or home page with animation)
 const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
 </script>