fix(marketing): keep the cookie banner buttons inside the box

Merged
SE
2d ago
+2-2

What & why

The marketing cookie banner is max-w-xs, and its action row was one justify-between line that could not wrap. In 12 of the 18 locales (cs, de, es, fr, it, ja, nl, pl, pt-BR, ru, uk, vi), "Accept" rendered past the banner's right edge.

The privacy link now takes its own line, and the two buttons share a two-column grid below it. The banner keeps one shape in every locale, and Opt-out and Accept get equal width.

Screenshots (before → after, 1280px)

Overflowed before:

cs

cs before → cs after

de

de before → de after

es

es before → es after

fr

fr before → fr after

it

it before → it after

ja

ja before → ja after

nl

nl before → nl after

pl

pl before → pl after

pt-BR

pt-BR before → pt-BR after

uk

uk before → uk after

vi

vi before → vi after

Already fit before (6): en, id, ko, tr, zh-CN, zh-TW

en

en before → en after

id

id before → id after

ko

ko before → ko after

tr

tr before → tr after

zh-CN

zh-CN before → zh-CN after

zh-TW

zh-TW before → zh-TW after

How I tested it

  • Drove the dev site in headless Chrome and checked each banner link and button against the banner's edges. At 1280px across all 18 locales: before, 12 overflow; after, none. At 320px in en, fr, uk, ja and es: no overflow after.
  • I also tried keeping one line and wrapping only when needed. I dropped it because the banner then changes shape between languages.
  • Biome passes on the changed file, and tsc passes in apps/marketing.

Checklist

  • PR title follows conventional commits (type(scope): subject)
  • bun run lint and bun run typecheck pass (CI fails on lint warnings too)
  • "Allow edits from maintainers" is checked on fork PRs
  • I have signed the CLA (the bot asks on your first PR)

Summary by cubic

Fixes the marketing cookie banner so the Accept and Opt-out buttons no longer overflow the box in 12 of 18 locales.

  • The privacy link now takes its own line, and the two buttons share a two-column grid beneath it.
  • The banner keeps one shape across all locales, with Opt-out and Accept equal width.

Summary by CodeRabbit

  • Style
    • Updated the cookie consent banner layout. The privacy policy link now appears above the consent buttons, which are displayed side by side in a full-width, two-column grid. This replaces the previous single-row arrangement and creates a clearer separation between the policy information and consent choices within the banner.