[R-07] Hero code window horizontal overflow on mobile

[vmorps]

[R-07] Hero Code Window Horizontal Overflow

Severity: P0 — Production-blocking (upgraded — confirmed via screenshot)
Sprint: 1 (ship immediately)
Component: Hero
Spec: design/specs/responsive-layout-fixes.md § R-07
Mockups: design/specs/responsive-layout-mocks.html — Screenshot 02

---

Current Behavior

The code block uses white-space: nowrap on .code at 0.8125rem (13px). On a 375px screen, only ~38 monospace characters fit. 7 of 17 lines overflow, with the worst offenders:

• source: { type: 'buffer', location: new TextEncoder()... — 84 chars (needs 655px)
• attributes: ['https://example.com/attr/classification/... — 71 chars (needs 554px)

The parent grid item uses CSS Grid default min-width: auto, preventing shrinking below content size. This pushes the entire page wider.

Root Cause

Two independent bugs combine:

1. CSS Grid min-width: auto — Grid item won't shrink below widest code line, so overflow-x: auto on .code never activates
2. Font size too large for mobile — At 13px monospace, only 38 chars fit

Expected Behavior

Code window stays visible at all viewports. Long lines scroll horizontally within the code block (not the page). Font size reduces on mobile so majority of lines are fully visible.

File(s) Impacted

• src/components/landing/Hero.module.css
• src/components/landing/Hero.tsx

Implementation Approach

Step 1: Fix grid containment (root cause)

.codeWrap {
  min-width: 0;
}

Step 2: Scale down font size on mobile

.code {
  font-size: 0.6875rem; /* 11px — mobile-first */
}

@media (min-width: 640px) {
  .code {
    font-size: 0.8125rem; /* 13px — restore at tablet+ */
  }
}

Step 3: Add scroll affordance (fade gradient on right edge)

Apply to .code (scrollable body), NOT .codeWrap — avoids overlaying the window chrome bar.

.code {
  position: relative;
}

.code::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2rem;
  background: linear-gradient(90deg, transparent, #0f1117);
  pointer-events: none;
  opacity: 0.6;
}

@media (min-width: 1024px) {
  .code::after {
    display: none; /* not needed on desktop */
  }
}

Line-by-Line Analysis at 11px

At 11px monospace (~6.6px/char), the code text area fits ~45 characters:

• 13 of 17 lines fit entirely (76%)
• 4 lines still overflow (long URLs, TextEncoder chain) — scrollable within the code block

Acceptance Criteria

• Code window is visible at all viewport widths including 375px
• No page-level horizontal scrollbar at any viewport width
• Long lines scroll horizontally within the code block only
• Font size is 11px on mobile, 13px on 640px+
• A subtle fade on the right edge indicates scrollable content on mobile
• Desktop code window appearance is unchanged

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.