The brief was not "make it responsive" — it was "the app should be its own
thing, all the same features, properly displayed". So below 860px the séance
is a native-shaped app: header strip, a 3x2 grid naming all six modes, a
dominant stage for the board, and a dock.
The six modes previously lived in a horizontally-scrolling rail with the
scrollbar deliberately hidden. Six 44px targets cannot fit 390px, so the
later ones — camera especially — were effectively undiscoverable: present,
but invisible, which reads to a user as "missing on mobile". They are now
all on screen, named, permanently.
ONE pattern carries every secondary surface: a bottom sheet. The links rail,
the whole instrument column (dossier, veil, devices, ritual, passage,
judgment, mode panel) and the transmission log each slide up from the dock.
Same geometry, same grabber, same close, same backdrop, one at a time. A
sheet is a door, not a deletion.
The other eleven pages get the same treatment in CSS: single-column stacked
cards, 60px+ tappable rows, 16px inputs, 44px targets, four-edge safe-area
insets, and a top inset that clears the fixed hamburger — which previously
sat on top of every page's back link.
NOTHING WAS REMOVED. Verified mechanically, not asserted: the only added
`display:none` rules cover three brand-new class names and a scroll-fade cue
for a rail that no longer scrolls. No pre-existing feature is hidden
anywhere.
DESKTOP IS UNTOUCHED. Also verified mechanically rather than trusted: I
stripped every `max-width <= 860px` block from both the old and new
stylesheets and diffed what remained. Eleven of twelve are byte-identical in
their desktop-applicable CSS; the twelfth differs by exactly one rule, which
hides three classes that did not previously exist. The moved panels keep
their own class names and merely gain data attributes, so they are not
nested inside anything hidden — desktop renders them as before.
429 tests, tsc clean, build clean.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
8fd60ed204