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 (
<>
-