Mobile: Service Status round 2 (#1004) + two more techniques Module page gains a Round 2 section (two screens, tap-anywhere cards, pill alignment, the sticky action bar, the confirm) and a note that the settings card feed from #1000 is gone. Calendar page's card-feed bullet marked superseded, with the reasoning kept — it lost to consistency across the set, not to being wrong. Two things promoted into Techniques: - position:sticky does NOT pin anything to the bottom of a short container; it only stops an element scrolling away. Pair it with margin-top:auto in a flex column. And the two fight a negative margin-bottom — auto absorbs the free space the negative margin creates, so they cancel and the bar lands its own margin short. - Never mix getBoundingClientRect() with clientHeight on anything inside a transformed container. Rects are scaled, layout properties are not; mixing them produced a "bottom" beyond the viewport and sent a diagnosis completely wrong. Fourth false alarm from animating modals.
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 (#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.
Mobile: Calendar (#998) + the two lessons it produced New page Mobile-Friendly-Calendar. Linked from the overview (status table, honest assessment, layer count), the sidebar, both sibling module pages, the Techniques reference table and Calendar.md. Two things worth carrying forward, both written up: - "docScrollW === innerWidth proves the page won't reflow to desktop. It does not prove the page is usable." The settings page passed every measurement while still being a four-column table you had to drag sideways -- the container's overflow-y:auto had quietly made it a horizontal scroller, so the table genuinely WAS contained. - A rule that "already covers this" is worth measuring. LAYER 3's 16px anti-zoom rule had never applied to any typed input, losing on specificity to inbox.css, app-wide, since the tickets rollout. Also recorded: every opted-in page must declare its own scroller (LAYER 2 makes body a 100dvh flex column and flex items shrink by default), and getComputedStyle beats getBoundingClientRect for anything inside a container that animates in with a transform.