landing_page/refer_landing_page/docs/STRUCTURAL_FIXES.md

# 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

```tsx
<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

```tsx
{/* 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**