Flow canvas: label and edge popovers follow pan and zoom, the editors' dock is a full-width bar on a phone
- InputInspector hangs off the label's element and EdgeInspector off a point in flow coordinates (ViewportPortal), both re-measured every frame while open and hidden once the anchor leaves the view. A label that leaves the canvas closes its popover. - Dock: below md a bar across the width, flush with the bottom edge (bg-card, top border, safe-area inset, no shadow); from md the floating pill as before. The flow dock drops the Run caption and the dashboard editor clears the bar with its own padding, so the editing state fits one row from 360px. - Tests: the search spec checks the popover rides along with a pan; the mobile spec checks both docks are a full-width bar flush with the bottom.
This commit is contained in:
@@ -160,6 +160,9 @@ Use `md` at 768px as the mobile boundary. Keep `useIsMobile()` and Tailwind's
|
||||
`overflow-x-auto` region. Use `min-w-0` on flex and grid children when
|
||||
content could stretch the page. `frontend/tests/mobile.spec.ts` checks this.
|
||||
2. Cap floating controls with `max-w-[calc(100vw-2rem)]` and allow wrapping.
|
||||
The editors' dock is the exception below `md`: a bar across the full width,
|
||||
flush with the bottom edge (`bg-card`, top border, no shadow, safe-area
|
||||
inset), whose brand button drops its caption so the usual row fits at 44px.
|
||||
3. Use 44px touch targets below `md`, 32px above. Use `icon-touch`, `sm-touch`
|
||||
or matching responsive utilities.
|
||||
4. Turn floating panels into full-screen sheets on phones with the shared
|
||||
|
||||
Reference in New Issue
Block a user