On mobile tablets/foldables (Android or iOS) in portrait, the viewport
width can exceed the Tailwind \`sm:\` breakpoint (640px), causing the
desktop footer bar to show and hiding the brightness / font size /
color / progress panels that only exist in the mobile layout.
The previous fix in #3746 introduced a regression on phones: wrapping
MobileFooterBar's children in a \`<div>\` changed the flex layout of
the footer container, and panels no longer slid cleanly behind the
navigation bar on dismissal. That PR was reverted.
This re-implementation scopes the override narrowly:
- \`forceMobileLayout\` is only true for mobile devices in portrait
with innerWidth >= 640. Phones (innerWidth < 640) always get
\`false\`, so every \`!forceMobileLayout && '…'\` expression
evaluates to the original class string — phone classNames are
set-equal to the pre-#3746 version.
- MobileFooterBar keeps its Fragment return; no wrapper div is
introduced anywhere in the tree, preserving the panel slide-down
animation exactly as before.
- DesktopFooterBar, NavigationBar, and the three panels
(ColorPanel / FontLayoutPanel / NavigationPanel) gate their
\`sm:hidden\` / \`sm:flex\` classes on \`!forceMobileLayout\` so
they correctly show/hide on wide portrait tablets.
- The orphaned \`.force-mobile-layout\` CSS override in globals.css
is removed since we no longer rely on a class-based escape hatch.
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Huang Xin
8b10e7fb17