fix(builder): mobile-A2 hardening -- 16px inputs, shared sheet/modal chrome, z-scale + portal
- 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>
This commit is contained in:
@@ -44,7 +44,11 @@ export const BottomSheet: React.FC<BottomSheetProps> = ({ open, onClose, title,
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
>
|
||||
<div className="mobile-sheet" role="dialog" aria-modal="true" aria-label={title}>
|
||||
{/* Deliberately NOT aria-modal: the tab bar stays reachable/operable
|
||||
while a sheet is open (tapping another tab swaps sheets directly),
|
||||
so the rest of the screen must not be marked inert to assistive
|
||||
tech the way a true modal dialog would be. */}
|
||||
<div className="mobile-sheet" role="dialog" aria-label={title}>
|
||||
<div className="mobile-sheet-handle-row">
|
||||
<span className="mobile-sheet-handle" aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user