Measure the label column, and the box the columns sit in

[MarkusNeusinger]

Two side findings from PR #533, both the same shape: a width that was assumed instead of measured.

The label column ran over its own bar

ScoreBreakdown gave its labels a hard-coded 78 px — about nine characters of the monospace face they are set in. „Deckungslücke", the longest category of the Sütterlin naturalness metric, is 13, so it painted 32 px into the bar it belongs to, at every viewport (measured: label box 78 px, text 110 px, bar starting 8 px after the box).

The column is now derived from the labels themselves: labelColumnChars (its own module, because scoreParts.tsx may only export components under the react-refresh rule) takes the character count of the longest label, and the width is that many ch — one ch is one character in a monospace face, so no DOM measurement is needed and a renamed category re-measures itself. Sized over all categories rather than the rows that happen to clear PENALTY_EPS, so a dropped-out category cannot put the two cards' bars at different x. Pinned by labelColumn.test.ts (4 cases).

Note on the brief: the two script metrics do not have different part names — Kurrent's metric returns no components at all, so its cards carry no per-category breakdown. The six naturalness categories are the whole surface the breakdown ever shows. Verified against the live payloads for loth-1866 and suetterlin-1922.

The modal scrolled sideways at 390 px

Not the score cards — they were already stacking at that width (measured: both at left: 48, one above the other). The cause was useColumnWidth, which derived the processing-stage columns from window.innerWidth − 64. That 64 px is the page's gutter; the modal's paper is a further 32 px narrower and pads another 32 px inside, so at 390 px each column stood at 326 px inside a 279 px box — 47 px too wide. The dialog's scroller measured 342 × 311 and the crop was cut off at the right edge.

useColumnWidth now measures the container it is handed (a callback ref, because both views mount their container only once their payload lands) through a ResizeObserver, so a breakpoint change or the modal's own scrollbar re-measures too. clampColumnWidth keeps its 120 px floor and its cap ceiling and now takes the available width rather than the viewport. On top, the dialog goes full-screen below md — the same rule and the same useMediaQuery the setup wizard already uses — which buys back the 64 px of margin.

Desktop is unchanged: 420 px columns at 1440 px, cards side by side, same paper height.

Sibling dialogs at 390 px, checked in the same breath

Dialog	Result
MarkDialog (⚑ markieren)	clean, no overflow
KorbPanel (Auftragskorb drawer)	clean, no overflow
SetupWizard	does not scroll — but its Stepper overflows the paper by 7 px and is clipped by the overflowX: 'hidden' the paper already carries. Different cause (the step-label row, not a column width), pre-existing, and the wizard is the authoring surface — left alone rather than folded in here.

RederiveAllDialog was not opened: it is a bulk-write surface and out of the „opened from the same view" scope.

Verification

/verify-frontend against the live API, admin reads only — no write was performed; every request in the run was a GET (…/diagnostic, …/fit, …/quality, crops), and „Neu ableiten & speichern" was never clicked.

Diagnose modal for a Sütterlin glyph (suetterlin-1922, breakdown present) and a Kurrent glyph (loth-1866, no breakdown), at 1440 × 900 and 390 × 844:

• document.documentElement.scrollWidth <= innerWidth holds at both widths. (At 1440 the document reports 1441 — a 1 px rounding on the letter page's h1 behind the modal, present before this change and unrelated to it.)
• The dialog's own scroller: 342 × 311 before at 390 px, 375 × 375 after — no horizontal scroll.
• Label vs bar rects: text right edge 158 px against a bar starting at 134.56 px before; 127 px against 134.56 px after — non-overlapping, and the label no longer clips (scrollWidth 111 in a 110.56 px box).
• Type floor: node scripts/type-floor.mjs clean on all 11 public routes; a sweep inside the open dialog finds nothing under 14 px.
• Console clean (only Vite's dev connect lines and the React DevTools notice); no ResizeObserver loop warnings across repeated viewport changes.
• npm run lint · npm run test (296 passing, 4 new) · npm run build green; uv run --extra test pytest (2381 passed) and both ruff gates green.

Screenshots (before/after, local): /tmp/kurrentschrift-ui/{before,after}-diagnose-*.png.

Docs

docs/reference/frontend-stack.md gets the two facts its module inventory would otherwise state wrongly: that useColumnWidth measures the container, and that the label width lives in quality/labelColumn.ts.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UEScQMZFvxxNNyNJYryfa3

[Copilot]

🟢 Approval recommended

The sizing fixes are coherent, documented, and adequately covered by focused tests and responsive verification.

Pull request overview

This PR fixes two responsive sizing issues in the admin Diagnose modal.

Changes:

• Derives penalty-label width from localized labels, with unit tests.
• Measures diagnostic columns via ResizeObserver and uses a full-screen mobile dialog.
• Updates frontend documentation and changelog.

File summaries

File	Description
app/src/sections/admin/diagnostics/DiagnosticDialog.tsx	Makes the dialog full-screen below md.
app/src/sections/admin/diagnostics/DiagnosticView.tsx	Connects container-based column measurement.
app/src/sections/admin/diagnostics/FitView.tsx	Connects container-based fit sizing.
app/src/sections/admin/diagnostics/useColumnWidth.ts	Measures available container width responsively.
app/src/sections/admin/quality/scoreParts.tsx	Applies label-derived column width.
app/src/sections/admin/quality/labelColumn.ts	Calculates the longest normalized label length.
app/src/sections/admin/quality/labelColumn.test.ts	Tests label-width calculation.
docs/reference/frontend-stack.md	Documents the responsive sizing mechanisms.
changelog.d/diagnose-modal-narrow.md	Records both fixes.

Review details

• Files reviewed: 9/9 changed files
• Comments generated: 0
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.