[R-09] Standards TDF diagram overflow on narrow screens

[vmorps]

[R-09] Standards TDF Diagram Overflow on Narrow Screens

Severity: P1 (upgraded — confirmed via screenshot)
Sprint: 2
Component: Standards
Spec: design/specs/responsive-layout-fixes.md § R-09
Mockups: design/specs/responsive-layout-mocks.html — Screenshot 03

---

Current Behavior

The TDF structure diagram uses monospace text with up to 3rem left padding (.pl12). Combined with labels like encryptionInformation and integrityInformation, the diagram content can exceed the viewport width on screens < 400px.

The diagram container has no overflow-x: auto rule, so the content simply overflows.

Expected Behavior

The diagram should either:

1. Scale down on mobile via reduced font size + padding
2. Be horizontally scrollable (with a subtle scroll indicator)

File(s) Impacted

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

Implementation Approach

.diagram {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
  .diagram {
    font-size: 0.75rem;
    padding: 1rem;
  }
  .pl4  { padding-left: 0.75rem; }
  .pl8  { padding-left: 1.5rem; }
  .pl12 { padding-left: 2.25rem; }
}

Acceptance Criteria

• Diagram does not cause horizontal overflow on 375px viewport
• Diagram is readable on mobile (font size ≥ 12px)
• Desktop diagram is unchanged
• If scrollable, user can scroll smoothly with momentum

---

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