Mobile: Change Management round 6 (#1189-#1193) + Techniques §16, §17 §16 - rules that only misbehave once another layer restacks them. Four faults from one round, all the same shape: a declaration correct where it was written, wrong only because a mobile layer moved something around it. align-items swapping axis with flex-direction; `width` doing nothing on an inline box (so .btn-full had NEVER applied to that <a>); a native control whose insides are shadow DOM and overflow without changing scrollWidth (and cannot be rearranged - the hooks are WebKit-only and iOS ignores them); and a button that had no style at all, drawn by the browser at 19px next to a styled one. §17 - CSS comments do not nest. A quoted rule inside a comment closed it early and the parser ate the rules that followed. Symptom is PRECISELY ZERO measured effect, which is the Watchtower load-order signal, so it sends you looking in the wrong place; braces still balance. Added a comment-nesting scan to the checks. Round 6 also documents the data-loss trap behind the cards: saveChange() reads every field through getEditorContent(), which returns '' when no editor is live, and editorsReady is set but never read - so simply not initialising TinyMCE would have silently blanked all six fields on save.
Mobile: change editor padding (#1188) + Techniques §15 §15 - a generic class name is usually two modules' class name. .editor-form / .editor-header / .editor-footer / .editor-scroll belong to BOTH Knowledge and Change Management, so LAYER 17's bare `.editor-form { padding: 14px }` had been styling the change editor since the day it was written. Scope on a marker only one module sets (body.cm-editor-open) - which also wins on specificity rather than load order, the thing that went wrong in the Watchtower round. Mirror image of §11's .pm-modal-content: there a module's OWN class hid it from a shared rule; here a SHARED class exposed it to another's. Both come from the name and neither shows up in a measurement of the page you are working on. The check is a second iframe as a control. Change Management Round 5: 88px of a 360px screen was margin and padding; field width 264 -> 312px, matching .change-detail-content's 12px.
Mobile: change editor full-screen panel (#1187) + Techniques §14 Techniques §14 - `min-width: auto`, the flex item that will not shrink. The change editor's rich-text widget measured 578px inside a 264px flex parent because a flex item will not go below its own min-content width (here six tabs end to end). An ancestor scroller absorbed the difference, so every containment check passed while the form ran off the side. The tell is to compare a child to its PARENT, not to the viewport. Plus the full-screen pattern over a TABBED widget (take the strip with you), the three things it always needs (`height: auto !important` to beat TinyMCE's inline height, a non-toolbar way out, re-measure after the class flip), and two failures worth keeping: injected chrome must live inside whatever the page re-parents, and driving the wrong entry point (showView vs editCurrentChange) measures a question next to the one you asked. Change Management gets Round 4 with the numbers and the desktop control.
Change Management: Round 3, the sticky header that could not be scrolled past
Remove the duplicated horizontal rule
Drop a duplicated rule before Round 2
Techniques §12: the sideways scrollbar that looks vertical Ed reported "a scrollbar appears but the contents don't scroll" on the change detail. The vertical scroll was fine - the bar was horizontal. overflow-y: auto makes overflow-x compute to auto per spec, so a pane made vertical is silently a horizontal scroller too, and the containment checks all pass because an ancestor scroller absorbs it. The only signal without looking at the page is the 15px gap between an element's box height and its clientHeight. Also records the negative-margin mistake: match it to the padding of its OWN parent, not the container you happened to change. Getting that wrong un-bled the element and made the overflow worse. Change Management page gains its Round 2 section.
Mobile: Change Management (module 8) + three lessons New Mobile-Friendly-Change-Management.md. The widest starting point of the rollout (1286px at 360) and an 80px list pane - but half the module came free, because table/calendar/settings/help inherit layers built on shared class names. Three additions to the Techniques lessons, all general: - flex-shrink: 0 is the commonest reason a row will not fit a phone. It is correct on desktop and exactly wrong at 360px, and because an ancestor scrolls, docScrollW === innerWidth stays true while the content sits off the edge of its box. - grid-column: 1 / -1 cannot reorder, only widen. Two buttons with a spanning section between them land on three rows; `order` fixes it. - When a probe reports a fault on shipped code that has had a device pass, suspect the probe. A table is only wrong if it is wider than its box AND no ancestor scrolls - keep a known-good page as a control. Overview: eight modules, LAYERS 1-23, rollout row. Sidebar entry added.