fix(marketing): cookie banner no longer covers the hero download button
Finding
From the biweekly fresh-Mac onboarding walkthrough (https://app.superset.sh/page/onboarding-walkthrough-on-a-fresh-mac-udhhym): on paradev.com in Safari on a 1440px-wide Mac, the cookie consent banner covered the left edge of the hero's primary Download for macOS button until the visitor accepted. That button is the first thing a new user tries to click.
Reproduced locally with headless Chromium using a Safari user agent. The banner never touches the CTA when the viewport is 1440 wide (the centered CTA starts at x=540 and the banner ends at x=336). It does cover the CTA when the window is narrower and shorter than the display. A fresh Mac opens Safari in a window smaller than the screen, so that is the likely case:
| Viewport | Before |
|---|---|
| 1024×700 | banner [16,518 → 336,684] covers the Download button [~325,516 → ~551,563]; a click at its left edge lands on the banner |
| 1000×640 | covered |
| 375×548 (iPhone SE Safari with toolbars) | covers all three hero CTAs |
| 1280–1920 wide, any tested height; 390×844; 390×664 | no overlap |
Change
Only apps/marketing/src/components/CookieConsent/CookieConsent.tsx, layout classes only. Same copy, same buttons, same consent logic.
- lg+ (≥1024px): a narrower corner card (
w-72, 288px instead ofmax-w-xs, 320px). From 1024px up the centered CTA row starts at x≥332, and the card ends at x=304, so they cannot overlap at any window height. - sm–md: a full-width bottom bar with one row (text, then Opt-out/Accept on the right), 74px tall.
- mobile: a full-width bar with text and buttons stacked, 110px tall instead of 166px.
- "Privacy policy" moves inline after the sentence instead of taking its own row. Buttons use
size="sm".
No message ids change, so check:i18n leaves the catalogs untouched.
Verification
A Playwright script ran against next dev. It loaded the homepage with no consent stored, so the banner was showing. It measured the banner rect against each hero CTA rect, and it ran elementFromPoint at the left edge, center, and right edge of each CTA. It also took screenshots.
After the fix: there is no overlap, and all three points land on the CTA, at 1280×720, 1280×600, 1440×600, 1440×760, 1440×900, 1920×1080, 1024×700, 1024×600, 1000×640, 768×900, 768×700, 390×844, 390×664 and 375×667. The screenshots at 1024×700, 768×900 and 390×844 show the card or bar clear of the CTA row.
One edge case is still open. At 375×548 the bar's top edge still overlaps the bottom ~10px of the mobile CTAs. All three points still click the CTA, so it is clickable but not fully clear. Fixing it fully would need shorter copy or a different mobile placement, and both are outside this small fix.
Not verified: real Safari/WebKit (this used Chromium with a Safari UA) and the production build. Screenshots are not committed because the repo has no artifacts pattern for them.
bun run typecheck(apps/marketing): passesbun run lint:fix: no fixesbun run check:i18n: no catalog changes
Summary by cubic
Stops the cookie consent banner from covering the hero download buttons by picking a placement that avoids them instead of using a fixed responsive layout.
- The banner tries corner-left, corner-right, a full-width bar, then a compact pill, and keeps the first placement that doesn't overlap an element marked
data-cookie-banner-keep-clear; it re-measures on resize. - The hero CTA rows in
HeroSectionandProductHeroActionsnow carry that marker. - The compact pill shows an "Analytics cookies" link in place of the full sentence, which adds a new message ID across all locale catalogs.
Summary by CodeRabbit
- New Features
- The cookie consent banner now adjusts its placement to avoid covering key page actions, and rechecks its position when the window is resized.
- Added translations for the “Analytics cookies” label across supported languages.
- Style
- The banner’s layout and text adapt to compact placements while keeping the privacy link and consent buttons available.