Half the editor was on the phone and none of it could be touched

Reported as "quite a few options don't function on mobile", and measured
in a real touch emulation rather than a narrow window — the distinction
matters, because two of the three causes need `pointer: coarse` to
appear at all. Three causes, one theme: the chrome was built for a
pointer that hovers.

The toolbar reveals itself on :hover — flex-wrap: wrap, overflow:
visible. A touchscreen never hovers, so that rule never fired and the
row stayed clipped at overflow: hidden permanently. Fourteen of its
twenty-three controls could not be reached by any gesture: every
heading, both lists, all three alignments, link, image, table, outline,
and both AI passes. The faded right edge promised there was more that
way, and there was no way. It now scrolls sideways on a coarse pointer,
keeping every control, exactly as .petal-chrome-strip does one line
above it — the same trade that comment already argued for, applied to
the row it was comparing itself to.

That move was only safe once the panels could get out. Every dropdown
in the editor chrome — tone, export, colour, highlight, size — was
already broken on a phone for a subtler reason: `position: fixed` is
relative to the viewport only while no ancestor establishes a
containing block, and mask-image does, exactly like transform. Both
scrollers fade their edges with a mask. So on any screen narrow enough
for the fade to appear, the menu was pulled back inside the very box it
was escaping, painted under the toolbar and untappable. The comment in
anchoredMenu.ts said "nothing clips a fixed box unless an ancestor has
a transform, and none of the editor's chrome does"; it was true when it
was written and had quietly stopped being true. The panels now portal
to <body>, where nothing above them can clip, stack over or contain
them whatever the chrome does with masks later, and the outside-tap
tests ask about both halves.

The kitten took the last two. She covered "Español" and "I am learning
Português" in the drawer, and "Hide falling petals" in the status bar
outright — three sample points across it, all three landing on the cat.
She already knows how to yield: useCardOverlap fades her for cards and
for anything with the modal role, and the drawer is the one overlay
that has neither, being navigation rather than something opened on
purpose. It is named there now. The status bar is a different problem —
it is always present, so yielding to it would mean fading forever — and
the honest fix is to sit above it on a narrow screen instead of
negotiating with it every frame.

Measuring, not eyeballing: a sweep of every visible, enabled control
reports zero off-screen and zero blocked, against fourteen and three
before. Desktop is deliberately untouched — at rest the slim clipped
line with its mask, on hover the wrapped row with all twenty-three
buttons on screen — and the edge measurement ChromeStrip already did is
now shared with the toolbar rather than written twice.

Claude-Session: https://claude.ai/code/session_01GJHNvirh7Hzhc9RL3HAvz7

This commit is contained in:

prosolis

2026-07-29 18:39:53 -07:00

parent 15398eab4d

commit 6026d98598

8 changed files with 241 additions and 71 deletions

									
										web/src/components/Companion/useCardOverlap.ts
									
		+8
		-1
	
												View File
												
				@@ -17,7 +17,14 @@ const POLL_MS = 500

				const HOLD_PX = 24

				const CARD = '.petal-rail-card'

				const MODAL = '[role="dialog"][aria-modal="true"]'

				// The mobile sidebar drawer is named outright because it is the one overlay that

				// isn't a dialog. It slides over the page behind a scrim exactly as History and

				// Garden do, but it is the app's own navigation rather than something opened on

				// purpose, so it carries no modal role for the selector above to catch — and the

				// kitten sat in its bottom corner, over the last two rows of the language

				// picker. On a 390px phone that put "Español" and "I am learning Português"

				// under the halo: visibly there, and only partly tappable.

				const MODAL = '[role="dialog"][aria-modal="true"], .petal-sidebar.petal-drawer-open'

				export interface CardOverlap {

				  // A suggestion card reaches the mascot. It should get out of the way, but may