Make announcement banner desktop-only, promote Agent Evals Lightning Lab - #1827
Conversation
…htning Lab Hides the global announcement banner on mobile/tablet (shows at md+, matching the nav's own desktop breakpoint) and swaps the copy/link to promote the August 12th Agent Evals Lightning Lab event.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gester-bot[bot]](https://avatars.githubusercontent.com/in/4369997?s=60&v=4){kind=small}
There was a problem hiding this comment.
Small, low-risk change — banner is now hidden below md breakpoint via hidden md:flex, content and link updated, and target/rel are correctly added together for the new external link. No issues found.
Re-review (2026-08-04): New since last review: Header.tsx now renders AnnouncementBanner inside the v1 header for all non-/blog, non-compact pages. One concern below — the header is position: fixed and several v1 hero sections use hardcoded top padding tuned to the header's previous (bannerless) height, so the banner may overlap hero content until the user scrolls past 40px.
Re-review (2026-08-04): No new material issues in this update — the Header.tsx change is unchanged from the previous review (my earlier fixed-header/hero-padding-overlap comment there still stands), and the banner restyle (solid salmon background, inline noise SVG, lg: breakpoint, removed rocket icon) is self-contained and doesn't introduce new defects.
Re-review (2026-08-05): Only change since the last review is swapping the banner's CTA text element from <strong className="font-semibold ..."> to <span className="font-normal ..."> — a cosmetic tweak with no functional impact. Nothing new to flag.
The banner component was only rendered from the legacy pages/_app.tsx, app/(v0) layout, and CaseStudy layout — none of which back the current v1-redesigned pages (e.g. everything under app/(v1), including /blog and most product pages), so it never actually appeared on the live site's primary page tree. Render it as the first child of the v1 <header> (still gated by the existing hidden md:flex desktop-only styling), hidden on /blog to avoid LCP impact and hidden once the header collapses to its compact scrolled-past state, matching the header's own show/hide conventions.
| data-ink-nav={inkNav ? "" : undefined} | ||
| > | ||
| {/* Promo banner — hidden on /blog (LCP risk) and when header is compacted */} | ||
| {!compact && !pathname?.startsWith("/blog") && <AnnouncementBanner />} |
There was a problem hiding this comment.
The header (<header ref={headerRef} className="fixed inset-x-0 top-0 z-50" ...>) is position: fixed, so it overlays page content rather than pushing it down. Several v1 heroes use static top padding tuned to the header's previous (bannerless) height — e.g. About/Hero.tsx (pt-[87px] lg:pt-[120px]) and SplitHero.tsx (pt-[87px], lg:pt-[162px]). Adding this banner increases the header's rendered height by ~40-50px whenever it's shown (initial/non-compact state, i.e. exactly when the hero is first visible), with no corresponding adjustment to those heroes' top padding. Worth confirming on those pages that the headline/hero content isn't obscured behind the taller header before the user scrolls past COMPACT_AT (40px).
Replaces the old green-gradient banner (legacy site styling) with the salmon background, noise texture, and v1 typography from the prior (unmerged) global-promo-banner work, so the banner now looks like the new site rather than the old one. Copy/link stay the Lightning Lab promo; breakpoint changes to lg+ to match that same prior design's banner cutoff. Uses a literal background color rather than a bg-v1-* Tailwind utility so it still renders correctly on legacy/pages-router routes that don't load styles/v1.css.
|
ty! |
Swaps <strong> (bold by default) + font-semibold for a plain <span> with font-normal, keeping the underline as the only emphasis.
2 participants
Description:
Hides the global announcement banner on mobile/tablet — it now only renders at the md breakpoint and up, matching the same breakpoint the nav already uses to switch between its mobile hamburger and desktop links.
Banner to promote the August 12th Agent Evals Lightning Lab, linking out to https://luma.com/inngest-r614?utm_source=web-banner (opens in a new tab).