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>
Ports the single-file MedCsFiz page — the medical centre that already runs
physiotherapy and wants the existing room to earn more — to the same
architecture as the fitness and hotel landings: Vite + React 19 + TypeScript +
Tailwind v4 on the client, Express 5 for the API, zod schema shared between the
two.
The original stays in legacy/index.html as the visual reference. Its 4 MB of
inlined CSS, JS and base64 images become 12 asset files (664 KB) plus a bundle
loaded on demand; the two 1.5 MB / 750 KB device PNGs are recompressed to webp.
The page is split into 18 components with all copy moved to src/data/content.ts.
Leads reuse the fitness amoCRM integration: contact lookup by phone in every
Russian spelling, deal in the first stage of pipeline 10980758, account fields
matched automatically with the rest written to a note. Rate limit, honeypot and
a localStorage fallback so a lead survives the CRM being down. Endpoint is
/api/leads/medical-centers-existing-physio; Vite runs on 5173 and the API on
3000.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
yuriy.pandClaude Opus 5
Yuriy PanovandClaude Fable 5