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.
New: Asset scanning — Developer Guide (the deep dive)
The scanning journey was spread across three pages and mostly implied.
This traces it end to end: how a printed square of ink becomes an
updated database row.
Twelve sections, the substantive ones being:
- Three scanning surfaces (native camera / in-app scanner / USB gun)
and why none of them is redundant.
- The public base URL — the single most consequential line in the
feature. Why it must not come from the request, the localhost
banner, the sub-folder double-append that would otherwise be
printed onto physical labels, and the two tunnel traps (a rotating
free ngrok URL, and its browser-only interstitial that curl won't
show you).
- The resolve flow, including why three regexes deliberately disagree
(routing is permissive, validation is strict, dispatch is neither).
- The write path: one door, shared with the desktop editor, so a
phone edit gets the same audit trail and warranty sync — and why
the no-op skip is load-bearing both in production and in tests.
- The security model: the token is a name, not a password, and the
unknown-vs-another-company answers are identical on purpose.
- Two mobile strategies in one module — mobile-FIRST scan pages
versus the mobile-ADAPTED module — and the five-step hinge where
they meet, which is what makes a scan land on the detail pane with
the device Back button working.
- How to test a camera headlessly (Y4M fake camera) plus the four
traps hit doing it.
- Failure modes, each mapped to its actual cause.
Section 1b of the labels guide now points here instead of duplicating
it; cross-linked from both QR pages, Mobile: Assets, and the sidebar.
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.