- Force font-size:16px !important on Styles-sheet/topbar/Sitesmith inputs
inside the mobile media query so inline 12px/14px styles stop triggering
iOS zoom-on-focus.
- Lift sheet-open + Templates/Head Code modal-open state out of private
useState into a shared MobileChromeContext (EditorShell), so Phase B can
open/close sheets from outside MobilePanelBar.
- Add an explicit z-index layer scale, portal TemplateModal to
document.body (was trapped under the tab bar inside .topbar's stacking
context), align Sitesmith to the same --z-modal layer, and make opening
a sheet close any open modal. Also fix modal backdrops swallowing tab
bar taps (mirrors the sheet backdrop's existing tab-bar cutout).
- Drop BottomSheet's incorrect aria-modal; mobile-aware AssetsPanel empty
state copy.
- Tests: useIsMobile (matchMedia mock incl. legacy fallback + cleanup),
MobileChromeContext invariants (one sheet open, sheet closes modals),
MobilePanelBar wiring.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Makes the Craft.js editor usable on phones (≤768px) without touching desktop
layout/behavior: a useIsMobile() hook gates a bottom tab bar + sheets (hosting
the existing Blocks/Pages/Layers/Assets/Styles panels unchanged) in place of
the side panels, a collapsed TopBar with a "..." overflow menu, 44px touch
targets, 16px inputs, dvh/safe-area-aware sizing, and small copy/overflow
fixes (empty-canvas hint, Templates modal tabs + close button).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
shadowdao