From 4467d201602b75c018c0850010ae6315947ed7ce Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 10 Mar 2026 13:57:16 +0700
Subject: [PATCH] fix: remove overflow-hidden from header, add mx-auto wrapper
 like logistics

---
 app/components/navigation/MainNavigation.vue | 25 +++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index e77427d..85bd857 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,14 +1,14 @@
 <template>
   <header
-    class="relative overflow-hidden"
+    class="relative"
     :style="{ height: `${height}px` }"
   >
-    <!-- Single row: Logo + Search + Icons -->
-    <div
-      class="relative z-10 flex px-3 lg:px-4 gap-2"
-      :class="isHeroLayout ? 'items-start pt-2' : 'items-center'"
-      :style="rowStyle"
-    >
+    <div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4">
+      <div
+        class="flex items-center gap-2"
+        :class="isHeroLayout ? 'items-start' : ''"
+        :style="rowStyle"
+      >
       <!-- Left: Logo + AI button + Nav links (top aligned) -->
       <div class="flex items-center flex-shrink-0 rounded-full pill-glass">
         <div class="flex items-center gap-2 px-4 py-2">
@@ -355,6 +355,7 @@
         </div>
       </div>
     </div>
+    </div>
 
   </header>
 </template>
@@ -523,13 +524,6 @@ const rowStyle = computed(() => {
   return { height: `${props.height}px` }
 })
 
-const glassStyle = computed(() => {
-  if (isHeroLayout.value) {
-    return { height: `${topRowHeight}px` }
-  }
-  return { height: '100%' }
-})
-
 const centerStyle = computed(() => {
   if (!isHeroLayout.value) return {}
   const heroHeight = props.height || topRowHeight
@@ -540,9 +534,6 @@ const centerStyle = computed(() => {
   return { marginTop: `${top}px` }
 })
 
-// Header background classes — two-layer glass is handled by .header-glass + .header-glass-backdrop
-const headerClasses = computed(() => '')
-
 // Use white text on dark backgrounds (collapsed or home page with animation)
 const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
 </script>