Mobile: tickets settings (#1005) + five more techniques
Mobile: Tickets gains a settings section; overview status/table/layer
count updated.
Five things promoted into Techniques:
- Read a page's own CSS comments before opting it in. tickets/settings
states outright that <body> must not be flex (extension-injected nodes
became flex items and wrecked the layout) and builds its own shell.
LAYER 2 would have re-created that bug. No harness catches it -- a
headless run has no extensions.
- A page that renders one tab at a time is 1/N verified. Measuring it as
loaded reported clean; walking all 18 tabs found the real problems.
- Exclude what must not change, don't enumerate what must. The anti-zoom
rule listed six input types and missed a datetime-local.
- Stacking a grid to one column does nothing if its children span two --
the browser creates an implicit second column and the rule looks like
it failed. The tell is unequal tracks.
- Ask the question measurement can answer. "Contained but crushed" kept
slipping past overflow checks, so assert the actual property: nothing
may still be laid out in more than one column at phone width.
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.
Mobile: Assets page, plus overview/tickets/sidebar updates
New Mobile-Friendly-Assets.md covering rounds 1 (#936) and 2 (#937):
scope table, what's done, the card-feed vs contained-scroller decision
and how to choose, the iOS reflow trap everything is dodging, the
restructured mobile.js entry point, the layer map, challenges &
solutions, and how it was verified headlessly.
Overview refreshed: Assets added to the module status table, LAYERS
1-13 -> 1-15, opt-in example bumped to v=31/v=14, the "can't
self-verify" line replaced with the harness that now works (and the
360px-iframe / measure-scrollWidth / desktop-positive-control method),
"one module deep" -> two.
Tickets page: shared-file version bump warning + sibling link.
Assets.md: an "On a phone" pointer. Sidebar: the new page.
Add Mobile: Techniques & Tricks page (CSS/JS deep-dive); cross-link + refresh overview
Mobile-Friendly wiki: bring current through #768 + all lessons learnt
- Overview: two CSS placements (shared-component file vs self-contained),
full "Device reality: iOS lessons" section (16px focus-zoom cascade,
native date/time spill, keyboard-vs-fixed-sheet, localStorage-mode leak),
reach-JS-without-editing, updated patterns (fill, overflow, side-panel),
module status, and an honest "Where it stands" room-for-improvement.
- Tickets: rounds 2/3 (ref/subject/badge/overflow/chevron/tenant switcher),
the Back/pop-out fix, all full-height action panels (note/reply/forward/
schedule/Ask-AI), LAYERS 1-9, and the iOS challenge rows.
Add Mobile-Friendly wiki pages (overview + Tickets)
Overview page: scope (on-the-go analyst), the desktop-safety rule
(@media/matchMedia gate), rollout model, the three navigation layers,
reusable patterns, how-to checklist, challenges & solutions, module status.
Mobile: Tickets page: what's done, how it works (wrapping selectEmail/
selectFolder, body[data-mobile-pane], history, config-driven section sheets,
mobile.css layers), challenges & solutions, known rough edges.
Linked both under Getting Started in the sidebar.