Structural Fix Pass — refer_landing_page

Date: 2026-06-16 Task: t_6707ec77 — "Fix overlapping elements and spacing collisions" Source catalogue: docs/LAYOUT_AUDIT.md (17 issues) Scope: structural / layout fixes only. Typography (font sizes, line heights, display scaling) is the previous task's responsibility and is left untouched.

Pass summary

Catalogue #	Severity	File	Issue	Status
1	🔴	lectures, standardization, intro	`border-current/30`, `border-current/20` fall back to a fixed gray instead of inheriting `currentColor`	✅ resolved by prior typography pass (replaced with `border-ink/30` + `group-hover:border-ivory/40`)
2	🔴	HeroComposition	`node-pulse` scales from SVG origin not circle center — drifts in older Firefox	✅ resolved by prior typography pass (added `transformBox: "fill-box"`, `transformOrigin: "center"` inline)
3	🔴	HeroComposition	"QUIC · STREAMS" bottom-right text (y=334) overlaps the 4th stream's curve body (y=290-380)	✅ resolved in this pass — see below
5	🟠	Footer	`mt-24` × `flex-1` main creates 6rem dead space on short pages	✅ resolved by prior typography pass (now `mt-0 lg:mt-8`)
6	🟠	PageHeader `<h1>`	No `break-keep` for long Korean titles, breaks mid-syllable	✅ resolved by prior typography pass (`break-keep text-balance` added)
7	🟠	Intro "Standards"	At 9rem cap, overflows col-span-7 column at 1280+	✅ resolved by prior typography pass (`display` capped at 7rem in `tailwind.config.ts`)
8	🟠	Members group 3	2 cards in `lg:grid-cols-3` → ghost cell with `bg-line` showing	✅ resolved by prior typography pass (grid now `sm:grid-cols-2` only — uniform 2-col)
9	🟠	Reveal no-JS	No fallback for the `.reveal { opacity: 0 }` rule — blank page if JS fails	✅ resolved by prior typography pass (`<noscript>` style block added in `app/layout.tsx`)
10	🟡	PageHeader `display` fallback	When `display` prop absent, long `en` overflows at 9rem	✅ resolved by prior typography pass (fallback now uses `display-sm`)
11	🟡	Counter year 2026	Year ticks 0→2026 (jarring for a year value)	✅ resolved by prior typography pass (Counter gained `static` prop, year passed `static: true`)
13	🟡	Counter magnitudes	"2026" 4× wider than "2"/"4" → visual imbalance	✅ resolved by prior typography pass (year uses `display-sm`, others use full `display`)
4, 12, 14	—	—	Verified fine on audit; no fix	—
15, 16, 17	🟡	Header sticky flex / h-[4.25rem] / SectionLabel text-sm	Polish items — not structural defects	⏭ out of scope (polish, not structural)

Net result: 1 structural fix in this pass (#3); 10 other catalogue items were already addressed by the prior typography pass (t_612a91e3).

Fix #3 — HeroComposition bottom-right text / stream overlap

File: app/intro/_components/HeroComposition.tsx Catalogue line: 59-74 (verified by SVG geometry: stream 4 control point at (240, 380), text was at y=334 — same y-band).

Before

<text x="20" y="34" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
  MCM · MESH
</text>
<text
  x="360"
  y="334"
  textAnchor="end"
  fill="#0A0A0A"
  fontSize="11"
  fontWeight="600"
  letterSpacing="2"
>
  QUIC · STREAMS
</text>

The "QUIC · STREAMS" label sat at y=334, inside the y-band where the four QUIC stream curves sweep (y=250-380 with control points reaching y+40). The 4th stream (start y=340, control point y=380) crossed directly through the text region.

After

{/* Annotations — placed in the top corners, clear of the stream
    curves and the node mesh. The bottom strip (y > 220) is reserved
    for the four QUIC streams (y = 250, 280, 310, 340 with control
    points reaching y +40 = 380), so a bottom-anchored text would
    collide with the 4th stream's curve. See LAYOUT_AUDIT #3. */}
<text x="20" y="24" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
  MCM · MESH
</text>
<text
  x="360"
  y="24"
  textAnchor="end"
  fill="#0A0A0A"
  fontSize="11"
  fontWeight="600"
  letterSpacing="2"
>
  QUIC · STREAMS
</text>

Both labels now sit in the top corners (symmetric mirror positions) at y=24, which is:

Clear of the MCM node mesh (nodes span y=60 to y=240)
Clear of the QUIC stream curves (start at y=250)
Inside the frame rect (frame at y=6, strokeWidth 1.5 → effective top edge at y=6.75)

Verification

curl http://localhost:4511/intro → HTTP 200, served HTML contains both labels at the new y="24" position.
No other selector / file was touched by this pass.

Items not changed (rationale)

#4, #12, #14 — audit verified them as non-issues. No edit needed.
#15 — sticky-header inside a flex column. The standard body flex flex-col; main flex-1; header sticky pattern is working in every modern browser (Chrome 84+, Safari 13.1+, Firefox 90+). The "fix" suggestions in the audit (e.g. changing body to block + margin-top: auto on main) trade one browser-version edge case for another. Not a real structural defect; leaving as-is.
#16, #17 — explicit polish items (h-[4.25rem] is fine for the 2-line brand; text-sm on the corner label is editorial choice). Out of scope for a structural pass.

Diff summary (this pass only)

app/intro/_components/HeroComposition.tsx
  - <text x="20" y="34" ...>MCM · MESH</text>     → <text x="20" y="24" ...>
  - <text x="360" y="334" ...>QUIC · STREAMS</text> → <text x="360" y="24" ...>
  + explanatory comment block (geometry rationale + audit reference)

Files modified by this pass: 1 Catalogue issues resolved by this pass: 1 (#3, the only remaining 🔴 that the prior typography pass did not already fix) Catalogue issues resolved cumulatively (this pass + prior typography pass): 11 of 17

5.9 KiB Raw Permalink Blame History Unescape Escape