Mobile: Service Status (#1003) + four more techniques New page Mobile-Friendly-Service-Status, linked from the overview (status blockquote, module table, honest assessment, layer count), the sidebar, all four sibling module pages, Techniques and Service-Status.md. Four things promoted into Techniques: - An inline style.display set by the page's own JS beats your rule. Service Status re-sets display:table on every render, so the card feed needed !important or it reverts on the first refresh. Grep a module for style.display before converting one of its tables. - "It reflows" is not the same as "it works". The board was already an auto-fill grid -- and a single column at 360px, i.e. a list. Ask what the component is FOR; a status board is for scanning, so density beats card size. - Not every module needs a mobile.js branch. Four in a row had one; this one shipped as CSS only. - A CSS comment edit is a code edit. Closing a comment early orphans text and the parser drops the rule that follows. Happened twice in one session, and brace-balance checks pass happily both times.
Mobile: Knowledge round 3 (#1002) + three widget-wrangling techniques Module page gains a "Round 3" section: the editor footer reaching the bottom edge, and full-screen text editing. Three things promoted into Techniques: - A JS-mounted widget injects its stylesheet at RUNTIME, so it beats yours on source order whatever the specificity. TinyMCE's skin lands after mobile.css; .tox-* rules need !important. The tell is a fix that looks like it HALF worked -- hiding the upsell badge succeeded while flex-wrap on the menubar did nothing, which read as "mostly fixed" until it was measured. Measure which half. - Reclaim a third-party widget's own chrome before adding your own. Four wrapped menubar rows plus an upsell badge were ~130px of a 720px screen; scrolling the menubar rather than hiding it returned 78px of typing area with every menu still reachable. - Build your own full screen, don't borrow the widget's. TinyMCE's fullscreen plugin was one line away but had no reachable exit in this init -- a phone user could get stuck. A fixed overlay with your own Close plus a pushState back-button exit cannot trap anyone.
Mobile: Knowledge round 2 (#1001) + three more techniques Module page gains a "Round 2" section: Back onto the action row, the Gmail-style collapsible meta block, and the sticky peek-through fix. Three things promoted into Techniques so the next module inherits them: - The sticky peek-through has now happened in TWO unrelated modules. A sticky element sticks to the top of its scroll container's CONTENT box, below its padding-top. Check the container's padding first; move the space onto something that scrolls away rather than deleting it; make any negative margin match the card's padding exactly. - A collapsible summary should BE the tap target, not sit beside a chevron -- bigger target, and its accessible name is the visible text, so it needs no aria-label and therefore no new string in 24 languages. Draw the chevron with borders; a glyph renders as a dot at 11px. - Harvest a translated word rather than writing one. common.back took each locale's own existing translation from change-management.php -- no EN-only key, no silent fallback, and the generic word lands in common where the next module finds it.
Mobile: Knowledge (#1000) + three lessons for the next module New page Mobile-Friendly-Knowledge. Linked from the overview (status table, honest assessment, layer count), the sidebar, all three sibling module pages, the Techniques reference table and Knowledge.md. Three things added to Techniques so the next module inherits them: - A wide table that "fits" hasn't been fixed, it has been crushed. display:block + overflow-x is only half the rule; without nowrap on the cells the browser wraps every column to one word per line, which passes the overflow measurement and is unreadable. - Grep a module for localStorage before bringing it along. Two of four modules have carried a saved DESKTOP mode that re-applies itself on a phone (tickets #762, knowledge editor pop-out #1000). Invisible in the markup; breaks for one user and not the rest. - The Share dropdown is a second instance of re-positioning a JS-positioned element in pure CSS. Also recorded on the module page: `let` globals are not window properties (so a harness cannot read them from outside), and a desktop-width overflow on a page that never opted into mobile.css is the control, not the bug.