From 1a6287d13e7889b02f52f053b386817439950b8c Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 12 Mar 2026 16:50:08 +0700
Subject: [PATCH] fix: pin header capsules and simplify home center capsule
 scroll

---
 app/components/navigation/MainNavigation.vue | 14 +++++---------
 app/layouts/topnav.vue                       |  4 ++--
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 79ef536..c2e35a6 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -531,9 +531,8 @@ const getTokenIcon = (type: string) => {
 
 const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
 const topRowHeight = 100
+const LANDING_CAPSULE_TOP_START = 500
 const LANDING_CAPSULE_TOP_STOP = 2
-const HERO_TITLE_HEIGHT_ESTIMATE = 72
-const HERO_CAPSULE_GAP = 20
 
 const rowStyle = computed(() => {
   if (isHeroLayout.value) {
@@ -544,7 +543,7 @@ const rowStyle = computed(() => {
 
 const heroTitleTop = computed(() => {
   if (!isHeroLayout.value) return 0
-  const heroHeight = props.height || topRowHeight
+  const heroHeight = props.heroBaseHeight || props.height || topRowHeight
   const minTop = 0
   const maxTop = Math.max(120, Math.round(heroHeight * 0.42))
   const progress = Math.min(1, Math.max(0, props.collapseProgress || 0))
@@ -560,12 +559,9 @@ const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
 
 const landingCapsuleTopStart = computed(() => {
   if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
-  const naturalTop = heroTitleTop.value + HERO_TITLE_HEIGHT_ESTIMATE + HERO_CAPSULE_GAP
-  const minTop = 180
-  const base = props.heroBaseHeight || props.height || 0
-  if (!base) return Math.max(minTop, naturalTop)
-  const maxTop = Math.max(260, base - 140)
-  return Math.max(minTop, Math.min(maxTop, naturalTop))
+  const base = props.heroBaseHeight || 0
+  if (!base) return LANDING_CAPSULE_TOP_START
+  return Math.max(280, Math.min(LANDING_CAPSULE_TOP_START, base - 180))
 })
 
 const landingCapsuleTop = computed(() => {
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 9643571..0649bc0 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -9,14 +9,14 @@
     <div class="flex-1 flex flex-col" :style="contentStyle">
       <!-- Fixed Header Container -->
       <div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
-      <div class="header-glass-backdrop" aria-hidden="true" />
       <!-- Static hero background for home page -->
       <HeroBackground v-if="isHomePage" />
+      <div class="header-glass-backdrop" aria-hidden="true" />
 
       <!-- MainNavigation -->
       <MainNavigation
         class="relative z-10"
-        :height="isHomePage ? heroBaseHeight : 100"
+        :height="100"
         :collapse-progress="isHomePage ? 0 : 1"
         :hero-scroll-y="isHomePage ? heroScrollY : 0"
         :hero-base-height="isHomePage ? heroBaseHeight : 0"