fix(footer): the legal column stopped fitting on a 13" laptop

[borjaperfra]

What was wrong

The footer's bottom band gave the wordmark width: clamp(320px, 82vw, 1240px) on a flex: 0 0 auto item — a fixed width that never yields. That 82vw only reaches its 1240px cap above ~1512px of viewport, so below that it ate 82% of the window and left the legal column 175px, whatever the screen.

Measured on the page:

viewport	wordmark	legal column	result
1280	1050px	175px	legal links on 3 lines, copyright on 5
1440	1181px	175px	same
1920	1187px	536px	the layout as designed

Calibrated for a large monitor, broken on every 13" laptop, in both locales.

The fix

Let flex do the work: the legal column asks for what it needs (clamp(300px, 34vw, 536px), floored above the width of the three links) and the wordmark takes what is left, shrinking rather than crushing it.

Two things that came along with it:

• The wordmark's height now comes from the SVG's own aspect ratio (220 / 33) capped at 178px, instead of a 12vw unrelated to the artwork that left dead space inside the box.
• The brand link is capped at the wordmark's drawn width, so above ~1900px hovering the empty space beside the logo no longer turns it violet.

Inside the stacked layout (≤860px) the main axis is vertical, so those flex bases go back to auto — otherwise they would size height — and the wordmark gets its full-bleed width back.

Verification

Playwright at 375 / 860 / 1280 / 1440 / 1512 / 1920 / 2560, on / and /es:

• 1280–1512: now match the 1920 layout — legal links on one line, copyright on two.
• 1920 and 2560: unchanged to the pixel (wordmark 1187×178, column at x=1312, 536 wide). Large screens do not move.
• ≤860px: stacked layout untouched (at 375px the wordmark is still 320×48, full bleed).
• No width overflows horizontally.

npm test (66 files, 1303 tests) and astro check (0 errors) pass.

Note

This started on fix/docs-pre-launch, but that branch is #75 and is about docs content — nothing to do with this CSS, so the fix was moved onto its own branch off main. Footer.astro is identical on main and untouched by any other open branch.

🤖 Generated with Claude Code