From a0a721d89aa35f4b63b27875342a1546afd3b280 Mon Sep 17 00:00:00 2001 From: Jenny Date: Sun, 28 Jun 2026 07:41:53 +0800 Subject: [PATCH] fix(header): event promo overflow - Let upcoming event promo content shrink and truncate safely - Harden event card title, pill, lockup, and location text wrapping --- skills/context/progress-tracker.md | 1 + src/app/globals.css | 30 ++++++++++++------- .../layout/header/header-stake-cta.tsx | 2 +- .../layout/header/site-header-mobile-menu.tsx | 2 +- src/components/layout/site-header.tsx | 4 +-- 5 files changed, 25 insertions(+), 14 deletions(-) diff --git a/skills/context/progress-tracker.md b/skills/context/progress-tracker.md index 7fb33ae..d36117d 100644 --- a/skills/context/progress-tracker.md +++ b/skills/context/progress-tracker.md @@ -89,6 +89,7 @@ All seven homepage sections are built, wired, and animated (scroll-driven entran ## Latest Handoff +- **Event text containment** -- Fixed compact desktop header overflow after the Atlanta event became the next event by letting the right header group and promo pill shrink before the title truncates; moved desktop nav/stake/hamburger breakpoint from lg to xl to give the promo pill room at mid-width viewports; hardened Events card title/location text so realistic long event names and metadata wrap or truncate without horizontal layout overflow. - **Cortex Atlanta event** -- Second event added to `events.ts` (stablecoins/payments, Aug 11 EDT, Luma RSVP). - **Events mobile carousel** -- Snap-scroll carousel on mobile with prev/next controls, 4-line description clamp, vertical centering. Tablet/desktop unchanged. - **Events carousel controls** -- Hydration fix (both flags init `true`), `useOnMount` subscription, `ResizeObserver` instead of `window.resize`, functional `setScrollState` bail-out, `next/dynamic` lazy import. diff --git a/src/app/globals.css b/src/app/globals.css index 30c5c0f..212fccc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1677,8 +1677,8 @@ .header-upcoming-event { isolation: isolate; - @apply relative inline-flex max-w-full overflow-hidden rounded-full border border-transparent bg-transparent px-3 py-1.5 font-mona text-nav leading-none text-text-secondary transition-colors duration-200 hover:text-text-primary; - max-width: min(100%, 17.5rem); + @apply relative inline-flex min-w-0 shrink overflow-hidden rounded-full border border-transparent bg-transparent px-3 py-1.5 font-mona text-nav leading-none text-text-secondary transition-colors duration-200 hover:text-text-primary; + max-width: min(100%, 18rem); } .header-upcoming-event::before, @@ -1719,19 +1719,20 @@ } .header-upcoming-event-content { - @apply relative z-10 flex min-w-0 items-center gap-2; + @apply relative z-10 flex min-w-0 w-full items-center gap-2 overflow-hidden; } .header-upcoming-event-pill { - @apply inline-flex h-5.5 shrink-0 items-center justify-center rounded-full border border-action-primary px-2.5 font-mona text-[0.5rem] leading-none font-medium whitespace-nowrap text-action-primary uppercase; + @apply inline-flex h-5.5 min-w-0 shrink-0 items-center justify-center truncate rounded-full border border-action-primary px-2.5 font-mona text-[0.5rem] leading-none font-medium text-action-primary uppercase; + max-width: 8.5rem; } .header-upcoming-event-copy { - @apply flex min-w-0 flex-col gap-0.5; + @apply flex min-w-0 flex-col gap-0.5 overflow-hidden; } .header-upcoming-event-date { - @apply text-[0.625rem] font-semibold uppercase tracking-wide text-brand-cortex-orange; + @apply block min-w-0 truncate text-[0.625rem] font-semibold uppercase tracking-wide text-brand-cortex-orange; } .header-upcoming-event-title { @@ -2416,6 +2417,7 @@ .event-title { @apply max-w-full font-mona text-[1.25rem] leading-normal font-bold text-text-secondary transition-colors duration-300 md:font-open md:text-event-heading md:leading-none; + overflow-wrap: break-word; } .event-countdown { @@ -2608,11 +2610,11 @@ } .event-pill { - @apply inline-flex h-5.5 min-w-20 items-center justify-center rounded-full border border-action-primary px-3 font-mona text-[0.5rem] leading-none font-medium whitespace-nowrap text-action-primary uppercase md:h-7.5 md:min-w-29 md:px-4 md:text-tag; + @apply inline-flex h-5.5 min-w-20 max-w-full items-center justify-center truncate rounded-full border border-action-primary px-3 font-mona text-[0.5rem] leading-none font-medium text-action-primary uppercase md:h-7.5 md:min-w-29 md:px-4 md:text-tag; } .event-lockup { - @apply inline-flex min-w-0 items-center gap-2 text-text-muted; + @apply inline-flex min-w-0 max-w-full items-center gap-2 overflow-hidden text-text-muted; } .event-lockup-mark { @@ -2620,11 +2622,19 @@ } .event-lockup-text { - @apply flex flex-col font-mona text-[0.5rem] leading-none font-extrabold whitespace-nowrap uppercase md:text-[0.6875rem]; + @apply flex min-w-0 flex-col overflow-hidden font-mona text-[0.5rem] leading-none font-extrabold whitespace-nowrap uppercase md:text-[0.6875rem]; + } + + .event-lockup-text span { + @apply truncate; } .event-location { - @apply inline-flex items-center gap-2 font-semibold; + @apply inline-flex min-w-0 max-w-full items-center gap-2 font-semibold; + } + + .event-location span { + overflow-wrap: anywhere; } .event-location-icon { diff --git a/src/components/layout/header/header-stake-cta.tsx b/src/components/layout/header/header-stake-cta.tsx index 1d5e591..4e98e39 100644 --- a/src/components/layout/header/header-stake-cta.tsx +++ b/src/components/layout/header/header-stake-cta.tsx @@ -21,7 +21,7 @@ export function HeaderStakeCta() { type="button" animated={false} aria-disabled="true" - className="header-stake-cta hidden font-bold lg:inline-flex" + className="header-stake-cta hidden font-bold xl:inline-flex" > {ctaButton.label} diff --git a/src/components/layout/header/site-header-mobile-menu.tsx b/src/components/layout/header/site-header-mobile-menu.tsx index d8ba919..74bcf9d 100644 --- a/src/components/layout/header/site-header-mobile-menu.tsx +++ b/src/components/layout/header/site-header-mobile-menu.tsx @@ -26,7 +26,7 @@ export function SiteHeaderMobileMenu() { return ( <>