Drop a duplicated rule between sections
Techniques §11: card feed or horizontal scroller? Ed asked whether a wide table on a phone should become a card feed or a horizontal scroller, and said it probably has to be case by case. It does - but there is a rule behind the cases, and the codebase has been following it without it being written down anywhere findable. Written up as its own section: the two-column decision table, and the tell that settles nearly every case - does a column hold PROSE? A sentence can be neither scrolled sideways nor squeezed into 82px. Also records the finding that makes it urgent: overflow gets reported, crushing does not. Of three tables on one page only the spilling one was noticed; the two that squeezed passed every automated check while being less readable. Measure the CELL, not the table - 82px wide and 134px tall is the signature. Plus the two construction details (display:inline rather than a flex row for cells that share a line; :has() to tell sibling tables apart) and the empty-state trap, which is one <td colspan> and therefore both the first and last child of its row. Problem Management page gains its Round 2 section.
Mobile: Problem Management (module 7) + three lessons New Mobile-Friendly-Problem-Management.md. The worst starting point of the rollout: a 250px fixed sidebar left the list 110px wide at 360px, and every automated check passed on it. Three additions to the Techniques lessons list, all general: - A module with its own modal class is invisible to LAYER 3, and the measurements cannot tell you - a small centred box on a phone is perfectly contained. - Not needing JS is not a virtue in itself. Three CSS-only modules in a row made a fourth branch feel like failure; the test is what the page does, and a six-line wrap was the right answer here. - Mark state AFTER the async work resolves. Flagging "showing detail" up front strands the flag when the fetch fails, hiding the list behind an error toast. Overview: seven modules, LAYERS 1-22, rollout row. Sidebar entry added.