[UltimaPhoenix]

Point 3 of the UI/UX review. The approved part of #132 (closed on 1 Nov to go through the plan one point at a time): /courses and /settings below sm. The nav is not in this PR: how Settings and the theme toggle fit a narrow window is a separate decision, so the second-row wrap from #132 is left out, and so is the 420 px screenshot pass.

Summary

Below sm (640 px) two dashboard pages could not be read:

• /courses: the four-column table cut every title ("From a cache miss to a…") and laid the status badge over the date.
• /settings: the paired fields (lessons per day + gap, interactions + scope) sat two per row and cut their selects ("Per chat sessi…").

Classes only, in src/web/views.ts:

• /courses below sm is a list (block sm:table, hidden sm:table-header-group, rows flex flex-wrap … sm:table-row): each course is a block with the full title (no clamp) and its lesson, then progress · status · updated on one line. From sm up it is the table, unchanged.
• /settings below sm stacks the paired fields one per row (grid-cols-1 sm:grid-cols-2). From sm up, two per row as before.

Before / after

Slideshow — each screen BEFORE (red band: without this PR), then AFTER (green band: with this PR), with one line saying what you see. It plays by itself; click it to open it full size. /courses is captured at 600 px, where the nav still fits on one row; /settings at 420 px, where the select gets cut. At 420 px the nav is cut on both sides: that is the separate decision above.

Dark

Side by side — BEFORE on the left, AFTER on the right.

/courses at 600 px. Before: the titles are cut and "completed" sits over "September 20". After: one block per course, the full title and its lesson, then progress · status · updated.

Dark

/settings at 420 px. Before: two fields per row, the select reads "Per chat sessi" and the labels wrap. After: one field per row, every label and select whole.

Dark

Captured with Playwright in real Chrome on two sandboxed dashboards restored from the screenshot fixture (never a real ~/.devcoach): develop and this branch.

Test plan

• npm run lint && npm run typecheck && npm run test:cov: 386 tests pass; coverage 94.82 % lines · 93.57 % statements · 96.83 % functions · 84.21 % branches (thresholds 92 / 91 / 95 / 76). tests/theme.test.ts passes (no hex, no indigo-*).
• tests/web.test.ts: /courses carries its narrow layout (hidden header, wrapping rows, title unclamped below sm), and a course seeded from no lesson renders the same block without the “from …” line; /settings has no fixed two-column row left.
• Checked in Chrome, light and dark: /courses at 600 px and /settings at 420 px (above); both pages unchanged at 1200 px.

🤖 Generated with Claude Code