Stu Mason
Stu Mason

Activity

Pull Request Merged

PR #124 merged: fix(ux): site-wide container consistency — Live ops + chrome rhythm

The miss

After Phase 9 (chrome) + Phase 10 (Live ops colour migration), the landing page still had a glaring inconsistency: the Live ops section used a max-w-[1920px] wrapper while everything else on the same page sat at max-w-[1200px]. The hero + showcase felt like one site, and Live ops felt like another, 60% wider.

I migrated colours and typography without auditing container widths. That's the root of the "3 different navbars / completely different shape" complaint Stu raised after shipping Phase 10.

What this PR does

pages/dashboard.tsx Live ops section — chrome cleanup:

  • max-w-[1920px]max-w-[1200px] (matches header, hero, showcase, /reports)
  • px-3 md:px-6px-6 (consistent gutter)
  • border-zinc-900border-hairline (both the section bottom border and the inner divider)
  • bg-zinc-950bg-page
  • "LIVE OPS" eyebrow: dropped hand-rolled font-mono text-[10px] uppercase tracking-[0.22em] text-zinc-500text-overline text-muted
  • Pulse dot: bg-emerald-500bg-accent-brand
  • "The raw firehose." H2: dropped inline style={{ fontFamily: 'Instrument Serif' }} + hand-rolled size/weight → text-h1 text-strong
  • Body copy: text-[14px] leading-relaxed text-zinc-500text-body-sm text-muted
  • Right-aligned meta lines: font-mono text-[10px] uppercase tracking-wider text-zinc-600text-overline text-faint

What stays

  • /reports/{slug} keeps max-w-[1000px] for the article body — that's deliberate (reading column). The header above sits at 1200px (SiteHeader) so the chrome rhythm is consistent; only the editorial main column is narrower.
  • Everything else on / is now 1200px end-to-end.

Verified locally

  • npm run build clean
  • grep -E "text-(zinc|emerald|cyan|violet|amber|rose|red)-[0-9]+" on dashboard.tsx → empty
+301
additions
-21
deletions
12
files changed