From 2d44c920fdd22ecc75a16728d0e1a0050f55d83f Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Thu, 18 Jun 2026 22:23:23 +0000
Subject: [PATCH] fix(mobile): scale up editor UI chrome fonts and toolbar on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a @media (max-width: 767px) block scoped to .ide-redesign-main
that bumps the CSS font-size tokens one step each and increases the
toolbar height, making buttons, labels, and panel headers readable
on a phone without touching the CodeMirror editor font size (which
is controlled by user settings independently).

Also reverts the unintended rail auto-collapse from the previous
commit — collapsing the sidebar was not the requested change.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ide-react/components/layout/main-layout.tsx  | 16 +---------------
 .../stylesheets/pages/editor/ide-lumiere.scss    | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
index e6d1346d78..40b92eb9d5 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
+++ b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
@@ -41,11 +41,7 @@ function detectMobile() {
 
 export default function MainLayout() {
   const [resizing, setResizing] = useState(false)
-  const {
-    resizing: railResizing,
-    handlePaneCollapse: collapseRail,
-    isOpen: railIsOpen,
-  } = useRailContext()
+  const { resizing: railResizing } = useRailContext()
   const {
     togglePdfPane,
     handlePdfPaneExpand,
@@ -69,16 +65,6 @@ export default function MainLayout() {
     }
   }, [])
 
-  // On mobile, collapse the file-tree rail so editor+PDF panels get full width.
-  useEffect(() => {
-    if (isMobile && railIsOpen) {
-      collapseRail()
-    }
-    // Only run on mount and when isMobile changes — don't re-collapse if the
-    // user manually re-opens the rail during the session.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMobile])
-
   // verticalSplit is always vertical; sideBySide becomes vertical on mobile
   const isVertical =
     pdfLayout === 'verticalSplit' ||
diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
index baa88c65ee..9c5d51594e 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
@@ -433,3 +433,19 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     background-color: $lum-teal;
   }
 }
+
+// ── Mobile: scale up editor UI chrome so it's usable on a phone ───────────
+// Bumps font-size tokens one step (12→14px, 14→16px, 16→18px) and increases
+// the toolbar height. Scoped to .ide-redesign-main so only the editor page
+// is affected. CodeMirror's own font size is controlled by user settings and
+// is unaffected by these CSS custom properties.
+
+@media (max-width: 767px) {
+  [data-lumiere='true'] .ide-redesign-main {
+    --font-size-01: 0.875rem;  // 14px (was 12px)
+    --font-size-02: 1rem;      // 16px (was 14px)
+    --font-size-03: 1.125rem;  // 18px (was 16px)
+    --toolbar-height: 48px;    // was 40px
+    --toolbar-small-height: 40px; // was 32px
+  }
+}