fix: prevent phone-width horizontal overflow (closes #26)

[dem-extra1]

Closes #26

Summary of Changes

• Ports the four responsive CSS containment rules from pds#18 / qwt#144 to styles.css:
  • .callout-body-container { min-width: 0; } to override flex items' default min-width: auto so callouts don't expand past the column width.
  • mjx-container[display="true"] with max-width: 100%, min-width: 0 !important, and overflow-x: auto to allow wide display equations to scroll horizontally instead of stretching the viewport.
  • main a { overflow-wrap: break-word; } so long bare URLs wrap.
  • @media (max-width: 575.98px) { main table { display: block; max-width: 100%; overflow-x: auto; } } so wide tables scroll horizontally on phone viewports without affecting desktop table layout.
• Adversarial code review passed clean.

[github-actions]

Claude finished review — View run

---

No duplicate or conflicting selectors — these are new, uniquely-named rules.

Review: PR #57 — fix: prevent phone-width horizontal overflow (closes #26)

Scope: styles.css only, additive (36 new lines at EOF), closing issue #26.

What I checked

• Diff confirmed as the only change (styles.css); no .qmd, R, or workflow files touched, so the R-lint, bullet-list, and code-fold rules from CLAUDE.md don't apply here.
• The four added rules match exactly what issue Pages likely scroll sideways at phone width: callouts stretch to fit wide math #26 asked for (ported from pds#18/qwt#144): .callout-body-container { min-width: 0; }, the mjx-container[display="true"] scroll box, main a { overflow-wrap: break-word; }, and the phone-only main table scroll rule.
• .callout-body-container and mjx-container[display="true"] are real Quarto/MathJax-v3 selectors (Quarto's callout markup nests .callout-header + .callout-body-container > .callout-body; MathJax v3 CHTML output tags block equations with display="true"), not hallucinated class names.
• Bootstrap 5's sm breakpoint is 576px, so the max-width: 575.98px media query is the conventional "just below sm" cutoff — correct.
• No duplicate/conflicting selectors already exist in styles.css for any of the four new rules (verified via grep).
• No non-ASCII punctuation (curly quotes, em/en-dash, ×) introduced in the new lines — consistent with the lab's non-standard-chars convention, even though .css isn't in that check's scanned extensions.
• Comments explain non-obvious why (flex min-width: auto default, need for !important to beat MathJax's inline style, why display: block is gated to the phone breakpoint) rather than restating the what — matches the style guidance on comments.
• No _site/, _freeze/, or workflow changes; build hygiene is clean.

Non-blocking observation

Issue #26 explicitly asked for a verification step — rendering and loading every page in headless Chromium at 320/390/1280px and asserting scrollWidth equals the viewport width with MathJax actually rendered — specifically because unrendered TeX gives misleading widths. Nothing in this diff or the PR description shows that check was actually run (the description only says "Adversarial code review passed clean," which is a static read of the CSS, not a rendered-page measurement). I can't run quarto render + headless Chromium in this environment to check it myself, so I can't confirm the fix actually closes the gap it targets versus just being plausible CSS. Worth the author (or a follow-up CI/manual step) confirming before merge, but I'm not blocking on it since the rules themselves are correct and narrowly scoped.

No bugs, no CLAUDE.md violations, no hallucinated APIs/selectors, no build-hygiene issues found.

Verdict

Ready for merge (optional: confirm the rendered-page overflow check from issue #26 before/after merging, but nothing here blocks it).

Structured Review Data (JSON)

{
  "schema_version": "1.1",
  "reviewer": "claude",
  "commit_sha": "161fa391625bcd7d5cf851dea49227cd5f6d3db1",
  "verdict": "CLEAN",
  "findings": [],
  "detailed_assessment": "styles.css gains four additive, correctly scoped rules with no selector collisions or syntax defects found in the changed lines.",
  "holistic_assessment": "The fix satisfies issue 26's requested CSS rules but lacks documented rendered-page validation across phone viewport widths before merge."
}

Reviewed commit: 161fa39

[github-actions]

💰 Cost: $0.2940 (review) — run

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-09-30 15:53 PDT