Port mds's phone-width overflow, code-line number and widget-panel CSS

[dem-extra1]

Requested by Ezra · project thread

Before: A wide display equation, code span or URL inside a callout stretched the callout past the phone viewport, so the page scrolled sideways. Code blocks had no line numbers, and widget panels were unreadable in the dark theme.

After: styles.css carries mds's rules: callouts and display equations stay within the column (a too-wide equation scrolls inside its own box), tables scroll inside their own box on phones, every code block shows line numbers that are not copied, and widget panels keep light input boxes and dark ink under the dark theme.

How: appends lines 238 to 349 of mds's styles.css, with one change: the widget-panel table-header rule has two extra selectors (div.observablehq .widget-panel … and .widget-panel div.observablehq …), because mds's single selector has lower specificity than Quarto's div.observablehq table thead tr th and loses to it. mds still has the lower-specificity version. In headless Chromium at 375px wide, the three sample chapters have no horizontal scroll and the line-number rule applies. The header fix is checked by specificity only, not on a rendered dark-mode table.

Closes #144.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UnjXjkrhQphsQCetZzqVXu

---

Generated by Claude Code

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[dem-extra1]

The link-checker failure is not from this PR, which only changes styles.css. Its only errors were 503 Service Unavailable for https://github.com/Morrison-Lab/ai-config/blob/main/AGENTS.md, linked from AGENTS.md and CLAUDE.md. The same check passed on main minutes earlier. No fix is needed, so I've re-run the failed job once.

---

Generated by Claude Code

[dem-extra1]

build / build fails here with ERROR: Unknown format html,pdf,revealjs. That comes from the preview.yml@v3 workflow in Morrison-Lab/gha (its skip-docx logic passes a comma-separated --to), not from this PR's CSS change. See the same note on #171. The link check now passes. I will re-run the build once gha is fixed.

---

Generated by Claude Code

[dem-extra1]

The review's specificity finding is right: Quarto's built CSS has div.observablehq table thead tr th at (0,1,5), which beats the ported .widget-panel table thead tr th at (0,1,4). Pushed 80cb056, which adds div.observablehq .widget-panel … and .widget-panel div.observablehq … variants (both (0,2,5)) so the override wins when the two are nested in either order. I checked the specificity only, not a rendered dark-mode OJS table. The same flaw is in mds's styles.css, which I have not touched.
Posted by Claude Code (AI agent) --- not written by a human.

---

Generated by Claude Code

[github-actions]

Claude finished review — View run

---

Confirmed: matches gh's reported additions:116, deletions:0, changedFiles:1. The saved diff file and prior-round range are both consistent with the real PR head (80cb056, merged into this checkout's 21aa403 merge commit). Good to finalize.

Let's double check the remaining hunks (overflow, line-numbers) weren't touched by this round — they weren't (only the table-header selector block changed), so no need to re-review those; the prior round's non-blocking notes on them still stand.

Review: #172 — Port mds's phone-width overflow, code-line number and widget-panel CSS

What changed since the last review round

Commit 80cb056 (styles.css:274-282) replaces the single .widget-panel table thead tr th selector with three comma-separated selectors:

.widget-panel table thead tr th,
div.observablehq .widget-panel table thead tr th,
.widget-panel div.observablehq table thead tr th {
  background-color: transparent;
  color: #222;
  border-bottom: 2px solid #adb5bd;
}

This directly addresses the previous round's finding (specificity (0,1,4) losing to Quarto's div.observablehq table thead tr th at (0,1,5)).

I independently re-derived the specificity math rather than trusting the new comment at face value:

• div.observablehq .widget-panel table thead tr th → 2 classes + 5 types → (0,2,5)
• .widget-panel div.observablehq table thead tr th → 2 classes + 5 types → (0,2,5)

Since specificity compares the class-count digit before the type-count digit, (0,2,5) beats Quarto's (0,1,5) regardless of how many type selectors either side has — the comment's claim ("the two longer selectors out-rank Quarto's (0,1,5) rule... in either order") is correct.

I also checked the real-world DOM assumption, since the fix is only as good as its premise about nesting order. Quarto's shipped _bootstrap-rules.scss does contain div.observablehq table thead tr th { background-color: var(--bs-body-bg); } unconditionally (confirmed via gh search code against quarto-dev/quarto-cli), and mds's actual usage (_fig-linear-approx.qmd, _fig-tilt-a-plane.qmd, _fig-gradient-explorer.qmd) applies .widget-panel to an outer .columns fenced div that wraps the OJS cell output, so any div.observablehq Quarto generates would nest inside .widget-panel — matching the third selector (.widget-panel div.observablehq ...), which is the one that will actually matter in practice. So this fix is not just specificity-correct in the abstract, it also matches the real nesting direction.

One caveat worth surfacing: none of the three mds .qmd files that currently use .widget-panel actually contain a table (no Inputs.table, no <table>), so this exact code path is untested against any real rendered page today — it's a forward-looking fix for a table that doesn't exist yet in content. That matches the author's own PR comment, which states plainly: "I checked the specificity only, not a rendered dark-mode OJS table." That's an honest disclosure, not a gap I'm newly flagging — the math fully resolves the previously-raised bug, and the remaining risk (real-DOM confirmation) is inherited, not new.

The author's comment also notes the same original (unfixed) single-selector version is still present in mds's styles.css, unchanged, which I confirmed by fetching mds's live styles.css — mds still has only .widget-panel table thead tr th { ... } with no div.observablehq-qualified variants. So qwt and mds have now diverged on this one rule: qwt carries the fix, mds doesn't. This isn't a blocker for this PR (the PR's job is to fix qwt, not mds), but it is worth a follow-up: the PR body describes this as "appends lines 238 to 349 of mds's styles.css unchanged," which is no longer accurate after this round's commit, and a future "re-sync with mds" port could silently regress this fix unless it's also pushed upstream to mds.

Findings

None blocking. The specificity defect raised in the prior round is resolved by this commit, verified independently against both the CSS specificity rules and the real DOM nesting order used in mds's existing .qmd content.

Non-blocking suggestions

• Consider filing a short follow-up PR against Morrison-Lab/mds with the same three-selector fix, so future re-syncs between the two repos don't reintroduce the lower-specificity version into qwt.
• Before merge (or in a near-term follow-up), a quick manual check — render a page with an OJS table inside .widget-panel, toggle dark mode, inspect the <th>'s computed background-color in devtools — would close out the one residual risk (that the live DOM nesting differs from what's inferred from mds's current .qmd files, none of which exercise this path yet). Not blocking, since the specificity and nesting-direction reasoning both check out independently.

All other hunks in this file (phone-width overflow at .callout-body-container/mjx-container/main table, and the code-line-number counters) are unchanged since the prior round and were already reviewed and found sound in that round's non-blocking notes — no new issues there.

Verdict

Ready for merge — the specificity bug flagged in the previous round is fixed and independently verified; no new issues found in this round's diff.

Structured Review Data (JSON)

{
  "schema_version": "1.1",
  "reviewer": "claude",
  "commit_sha": "21aa4038dd6237a57141021598807746de03e1e9",
  "verdict": "CLEAN",
  "findings": [],
  "detailed_assessment": "styles.css:274-282 now uses two higher-specificity selectors (0,2,5) that correctly outrank Quarto's div.observablehq table thead tr th rule (0,1,5), resolving the dark-mode header-background defect flagged previously.",
  "holistic_assessment": "The fix matches mds's real .qmd DOM nesting order, closes the prior round's regression risk, though mds itself still lacks this fix, creating template drift worth a follow-up port upstream."
}

Reviewed commit: 80cb056

[github-actions]

💰 Cost: $0.5896 (review) — run

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.

_{2026-10-12 07:41 UTC}