fix: remove overflow-hidden from header, add mx-auto wrapper like logistics
All checks were successful
Build Docker Image / build (push) Successful in 6m25s

This commit is contained in:
Ruslan Bakiev
2026-03-10 13:57:16 +07:00
parent 2e9ce856f2
commit 4467d20160

View File

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