yuriy.pandClaude Opus 5
cd51cb5632
Four defects, all of them real clipping rather than styling taste. The header's two action pills were `shrink-0` at 288px inside a 343px container, so flexbox took the difference out of the logo, which carried `min-w-0`. The brand mark rendered 37px wide at 375px and 0px at 320px, and the CTA ran past the right edge. The wordmark stays legible now and the call button goes square and icon-only below 760px; the CTA moves to a new MobileActionBar, which has room for it and puts it in the thumb zone. It waits for the hero's own buttons to scroll away and drops back down while the form is on screen, so it never covers the fields it points at. `.scroll-cards` bleeds to the viewport edge with a 16px inline padding and a matching negative margin, but had no `scroll-padding-inline`, so `scroll-snap-align: start` resolved to scroll position 16 and mandatory snapping forced that scroll on load: the first card sat on the bezel with no gutter, and one row had drifted a full card over. Matching the padding fixes the resting position on all seven rows. Card tracks move from a percentage of the row to `calc(100vw - 62px)`. A percentage peek grows with the screen, and at 82-90% it exposed ~68px of the next card -- enough legible half-words to read as broken text. The value stays in the markup as `auto-cols-*` so it keeps its sort position against `sm:grid-still`, which has to win at the breakpoint. The market stat card pinned its source line to the card bottom while the longest label wraps to four lines at phone width, running text through text by 75px. The source is in flow under `mt-auto` instead. The header CTA switches on `max-md` rather than the `narrow` variant: `narrow` is max-width 760 and the bar is min-width 760, so at exactly 760px both would have hidden and the page would have had no CTA at all. Verified at 320 / 375 / 759 / 760 / 800 and desktop: no horizontal page scroll, no in-flow overflow, desktop grids unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
import logo from '../assets/images/exo-logo.png'
|
|
import { contacts, navLinks } from '../data/content'
|
|
import { ButtonLink, buttonClass, headerSize } from './Button'
|
|
import { PhoneIcon } from './Icons'
|
|
import { Container } from './Layout'
|
|
|
|
/**
|
|
* The original ended up with the blurred background painted unconditionally —
|
|
* the last stylesheet override drops the scroll-dependent variant — so there is
|
|
* no scroll state to track here.
|
|
*
|
|
* Below 760px the bar carries the brand mark and the call button only. The two
|
|
* action pills used to be `shrink-0` and 288px wide inside a 343px container,
|
|
* which left the logo — the one element that has to stay legible on a
|
|
* credibility-led B2B page — 37px at iPhone width and 0px at 320px, with the
|
|
* CTA itself running past the right edge. The CTA moves to `MobileActionBar`,
|
|
* which has room for it and puts it in the thumb zone.
|
|
*/
|
|
export function SiteHeader() {
|
|
return (
|
|
<header className="fixed inset-x-0 top-0 z-[60] bg-navy-deep/[0.92] py-[14px] shadow-[0_12px_42px_rgb(3_20_34/0.18)] backdrop-blur-[18px]">
|
|
<Container className="flex items-center justify-between gap-[16px]">
|
|
<a className="inline-flex shrink-0 items-center" href="#top" aria-label="ЭКЗО Групп — наверх">
|
|
<img
|
|
alt="ЭКЗО Групп — российские технологии реабилитации"
|
|
className="block h-auto w-[146px] object-contain object-left compact:w-[138px] sm:w-[168px] lg:w-[clamp(172px,20vw,232px)]"
|
|
src={logo}
|
|
width={900}
|
|
height={204}
|
|
/>
|
|
</a>
|
|
|
|
<nav
|
|
aria-label="Основная навигация"
|
|
className="hidden items-center gap-[28px] text-[14px] font-[680] text-white/[0.76] lg:flex"
|
|
>
|
|
{navLinks.map((link) => (
|
|
<a key={link.href} href={link.href} className="transition-colors duration-200 hover:text-white">
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex shrink-0 items-center gap-[8px]">
|
|
<a
|
|
href={contacts.phoneHref}
|
|
aria-label={`Позвонить в Экзо Групп по номеру ${contacts.phone}`}
|
|
className={buttonClass(
|
|
'call',
|
|
undefined,
|
|
/* Square and icon-only until the bar has room for the word. */
|
|
'min-h-[44px] w-[44px] px-0 text-[13px] md:w-auto md:px-[17px]',
|
|
)}
|
|
>
|
|
<PhoneIcon />
|
|
<span className="hidden md:inline">Звонок</span>
|
|
</a>
|
|
{/* `max-md`, not the `narrow` variant: `narrow` is max-width 760 and the
|
|
bar is min-width 760, so at exactly 760px both would hide and the page
|
|
would have no CTA at all. `max-md` is the exact complement of `md`. */}
|
|
<ButtonLink href="#proposal" size={headerSize} className="max-md:hidden">
|
|
Получить предложение
|
|
</ButtonLink>
|
|
</div>
|
|
</Container>
|
|
</header>
|
|
)
|
|
}
|