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

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>
This commit is contained in:
2026-07-13 06:54:15 -07:00
parent 329a782052
commit 979331b12d
10 changed files with 852 additions and 64 deletions
+8 -2
View File
@@ -253,8 +253,10 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
</div>
<button
onClick={onClose}
className="template-modal-close-btn"
style={closeButtonStyle}
title="Close"
aria-label="Close"
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--color-bg-hover)'; (e.currentTarget as HTMLElement).style.color = 'var(--color-text)'; }}
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; (e.currentTarget as HTMLElement).style.color = '#71717a'; }}
>
@@ -262,11 +264,15 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
</button>
</div>
{/* Filter Tabs */}
<div style={tabBarStyle}>
{/* Filter Tabs -- horizontally scrollable (tabBarStyle sets
overflowX: 'auto') so the row never wraps/overflows the modal at
narrow widths; template-modal-tab-btn below keeps each tab from
shrinking below a comfortable touch target on mobile. */}
<div className="template-modal-tabbar" style={tabBarStyle}>
{TABS.map((tab) => (
<button
key={tab.value}
className="template-modal-tab-btn"
onClick={() => setActiveTab(tab.value)}
style={{
...tabStyle,