From 8c1827fab6dbfe6f32fdd69be4b6a9bd7210472a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 6 Feb 2026 16:37:17 +0700
Subject: [PATCH] Adjust capsule dividers height

---
 app/components/navigation/MainNavigation.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index e1891c7..c8c4d53 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -8,7 +8,7 @@
     <!-- Single row: Logo + Search + Icons -->
     <div class="relative z-10 flex items-center h-full px-4 lg:px-6 gap-4">
       <!-- Left: Logo + Nav links (top aligned) -->
-      <div class="flex items-center flex-shrink-0 rounded-full glass-bright divide-x divide-white/20">
+      <div class="flex items-center flex-shrink-0 rounded-full glass-bright">
         <div class="flex items-center gap-2 px-4 py-2">
           <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
             <span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
@@ -16,6 +16,7 @@
         </div>
 
         <!-- Service nav links -->
+        <div v-if="showModeToggle" class="w-px h-6 bg-white/20 self-center" />
         <div v-if="showModeToggle" class="flex items-center px-3 py-2">
           <nav class="flex items-center gap-1">
             <button
@@ -122,7 +123,7 @@
 
         <!-- Quote mode: Simple segmented input with search inside (white glass) -->
         <template v-else-if="catalogMode === 'quote'">
-          <div class="flex items-center w-full rounded-full glass-bright divide-x divide-white/20 overflow-hidden">
+          <div class="flex items-center w-full rounded-full glass-bright overflow-hidden">
             <!-- Product segment -->
             <button
               class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@@ -131,6 +132,7 @@
               <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>
+            <div class="w-px h-8 bg-white/20 self-center" />
             <!-- Hub segment -->
             <button
               class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
@@ -139,6 +141,7 @@
               <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>
+            <div class="w-px h-8 bg-white/20 self-center" />
             <!-- Quantity segment (inline input) -->
             <div class="flex-1 px-4 py-2 min-w-0">
               <div class="text-xs text-base-content/60">{{ $t('catalog.filters.quantity') }}</div>
@@ -216,7 +219,7 @@
       </div>
 
       <!-- Right: AI + Globe + Team + User (top aligned like logo) -->
-      <div class="flex items-center flex-shrink-0 rounded-full glass-bright divide-x divide-white/20">
+      <div class="flex items-center flex-shrink-0 rounded-full glass-bright">
         <div class="flex items-center px-2 py-2">
           <!-- AI Assistant button -->
           <NuxtLink
@@ -228,6 +231,7 @@
           </NuxtLink>
         </div>
 
+        <div class="w-px h-6 bg-white/20 self-center" />
         <div class="flex items-center px-2 py-2">
           <!-- Globe (language/currency) dropdown -->
           <div class="dropdown dropdown-end">
@@ -264,6 +268,7 @@
         </div>
 
         <!-- Team dropdown -->
+        <div v-if="loggedIn && userData?.teams?.length" class="w-px h-6 bg-white/20 self-center" />
         <div v-if="loggedIn && userData?.teams?.length" class="flex items-center px-2 py-2">
           <div class="dropdown dropdown-end">
             <button
@@ -299,6 +304,7 @@
         </div>
 
         <!-- User menu -->
+        <div v-if="sessionChecked" class="w-px h-6 bg-white/20 self-center" />
         <div v-if="sessionChecked" class="flex items-center px-2 py-2">
           <template v-if="loggedIn">
             <div class="dropdown dropdown-end">