From 235fe94a896a5be0864ad771fee42964f451c2f7 Mon Sep 17 00:00:00 2001
From: Sameh Khamis <sameh@halfpixel.ai>
Date: Sat, 14 Nov 2026 13:36:12 -0800
Subject: [PATCH] Open Visual from the left stack in the phone's More sheet

Co-authored-by: Manjunath Paparaju <manjunath@halfpixel.ai>
---
 src/ui/mobileShell.js          | 3 ++-
 src/ui/mobileShell.test.mjs    | 2 +-
 src/ui/styles/mobile-shell.css | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/ui/mobileShell.js b/src/ui/mobileShell.js
index 65673cd55..7570e2d17 100644
--- a/src/ui/mobileShell.js
+++ b/src/ui/mobileShell.js
@@ -368,7 +368,8 @@ export function initMobileShell({
         : sheet === 'search'
           ? [dock]
           : sheet === 'more'
-            ? [element('right-context-rail'), dock]
+            ? // Visual lives in the left stack; the dock holds the presets.
+              [element('left-panel-stack'), dock]
             : [element('right-context-rail')];
     return roots.find((root) => root?.contains(target));
   };
diff --git a/src/ui/mobileShell.test.mjs b/src/ui/mobileShell.test.mjs
index c0e0b909f..337fde99b 100644
--- a/src/ui/mobileShell.test.mjs
+++ b/src/ui/mobileShell.test.mjs
@@ -623,7 +623,7 @@ test('the phone shell keeps the required attribution visible', () => {
   );
   const openDock = rule('body.mobile-shell[data-mobile-sheet] #command-dock');
   const railSheet = rule(
-    "body.mobile-shell[data-mobile-sheet='more'] #right-context-rail",
+    "body.mobile-shell[data-mobile-sheet='more'] #left-panel-stack",
   );
   assert.ok(z(sheetCredit) > z(openDock));
   assert.ok(z(sheetCredit) > z(railSheet));
diff --git a/src/ui/styles/mobile-shell.css b/src/ui/styles/mobile-shell.css
index 593e10a07..b6e7875f8 100644
--- a/src/ui/styles/mobile-shell.css
+++ b/src/ui/styles/mobile-shell.css
@@ -129,7 +129,9 @@ body.mobile-shell #right-context-rail {
 body.mobile-shell[data-mobile-sheet='layers'] #left-panel-stack,
 body.mobile-shell[data-mobile-sheet='cameras'] #right-context-rail,
 body.mobile-shell[data-mobile-sheet='context'] #right-context-rail,
-body.mobile-shell[data-mobile-sheet='more'] #right-context-rail {
+/* Visual opens from the left rail on wider screens, so it lives in the left
+   stack and the More sheet is that stack showing Visual alone. */
+body.mobile-shell[data-mobile-sheet='more'] #left-panel-stack {
   position: fixed;
   top: auto;
   right: 0;
@@ -189,7 +191,7 @@ body.mobile-shell[data-mobile-sheet='context']
 body.mobile-shell[data-mobile-sheet='context']
   #right-context-rail
   > #recent-imagery-panel:not([hidden]),
-body.mobile-shell[data-mobile-sheet='more'] #right-context-rail > #pp-toggles {
+body.mobile-shell[data-mobile-sheet='more'] #left-panel-stack > #pp-toggles {
   position: relative;
   inset: auto;
   display: block;