Mobile Phase A: responsive editor (bottom-sheet panels, collapsed topbar, touch ergonomics) #9

2026-07-13T14:31:23Z

jknapp commented

2026-07-13 14:31:23 +00:00

Makes the editor usable on phones (Phase A of the mobile MVP; Phase B adds tap-to-add + selection toolbar). ALL gated ≤768px — desktop pixel-unchanged; zero toHtml/published-output change.

useIsMobile hook; EditorShell mobile layout: full-width canvas + bottom tab bar (Blocks/Pages/Layers/Assets/Styles) each opening a scrollable BottomSheet hosting the existing panels.
TopBar collapses to essentials + a ⋯ overflow menu (Templates/Preview/Head Code/Guides/device/Sitesmith).
Touch ergonomics: 44px targets, 16px inputs (incl. inline-style override), viewport-fit=cover, 100dvh, safe-area insets.
Pre-Phase-B prep: shared MobileChromeContext (open/close sheets), explicit z-index layer scale, TemplateModal portaled to body, opening a sheet closes any open modal.
Tests for useIsMobile/MobilePanelBar/MobileChromeContext. 597 tests.

🤖 Generated with Claude Code

Makes the editor usable on phones (Phase A of the mobile MVP; Phase B adds tap-to-add + selection toolbar). ALL gated ≤768px — desktop pixel-unchanged; zero toHtml/published-output change. - useIsMobile hook; EditorShell mobile layout: full-width canvas + bottom tab bar (Blocks/Pages/Layers/Assets/Styles) each opening a scrollable BottomSheet hosting the existing panels. - TopBar collapses to essentials + a ⋯ overflow menu (Templates/Preview/Head Code/Guides/device/Sitesmith). - Touch ergonomics: 44px targets, 16px inputs (incl. inline-style override), viewport-fit=cover, 100dvh, safe-area insets. - Pre-Phase-B prep: shared MobileChromeContext (open/close sheets), explicit z-index layer scale, TemplateModal portaled to body, opening a sheet closes any open modal. - Tests for useIsMobile/MobilePanelBar/MobileChromeContext. 597 tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

jknapp added 2 commits 2026-07-13 14:31:23 +00:00

feat(builder): mobile-responsive editor chrome (Phase A) 979331b12d

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>

fix(builder): mobile-A2 hardening -- 16px inputs, shared sheet/modal chrome, z-scale + portal 2a8a26687b

- 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>

jknapp merged commit 2a071bc7ab into main

2026-07-13 14:31:24 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cloud-hosting-platform/site-builder#9