From d291c2f074cd80e78a9bec757fe7a4fe0edb94d4 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 10 Feb 2026 20:37:41 +0000
Subject: [PATCH] fix(ui): avoid Monaco overlay dimming on phone

---
 .../components/instance/instance-shell2.tsx   | 34 -------------------
 packages/ui/src/styles/panels/right-panel.css | 12 +++----
 2 files changed, 4 insertions(+), 42 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 24e26297..57d35376 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -1631,23 +1631,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             <Show when={isPhoneLayout()}>
               <Show when={changesListOpen()}>
                 <div class="file-list-overlay" role="dialog" aria-label="Changes">
-                  <div class="file-list-overlay-header">
-                    <span class="files-tab-selected-path" title={selectedFileData?.file || ""}>
-                      {selectedFileData?.file || ""}
-                    </span>
-                    <button
-                      type="button"
-                      class="files-toggle-button"
-                      onClick={() => {
-                        setChangesListTouched(true)
-                        setChangesListOpen(false)
-                        persistListOpen("changes", false)
-                      }}
-                      aria-label="Close files"
-                    >
-                      Close
-                    </button>
-                  </div>
                   <div class="file-list-scroll">
                     <For each={sorted}>
                       {(item) => (
@@ -1881,23 +1864,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             <Show when={isPhoneLayout()}>
               <Show when={filesListOpen()}>
                 <div class="file-list-overlay" role="dialog" aria-label="Files">
-                  <div class="file-list-overlay-header">
-                    <span class="files-tab-selected-path" title={browserPath()}>
-                      {browserPath()}
-                    </span>
-                    <button
-                      type="button"
-                      class="files-toggle-button"
-                      onClick={() => {
-                        setFilesListTouched(true)
-                        setFilesListOpen(false)
-                        persistListOpen("files", false)
-                      }}
-                      aria-label="Close files"
-                    >
-                      Close
-                    </button>
-                  </div>
                   <div class="file-list-scroll">
                     <Show when={parent}>
                       {(p) => (
diff --git a/packages/ui/src/styles/panels/right-panel.css b/packages/ui/src/styles/panels/right-panel.css
index 0ecaf812..f82cd22a 100644
--- a/packages/ui/src/styles/panels/right-panel.css
+++ b/packages/ui/src/styles/panels/right-panel.css
@@ -117,6 +117,7 @@
 .files-tab-body {
   @apply flex flex-col flex-1 min-h-0;
   position: relative;
+  isolation: isolate;
 }
 
 .file-list-overlay {
@@ -126,16 +127,11 @@
   flex-direction: column;
   background-color: var(--surface-secondary);
   border-left: 1px solid var(--border-base);
-  z-index: 5;
+  /* Monaco uses layered positioned elements; keep overlay well above it. */
+  z-index: 200;
 }
 
-.file-list-overlay-header {
-  @apply flex items-center justify-between gap-2 px-3 py-2 border-b;
-  border-color: var(--border-base);
-  background-color: var(--surface-secondary);
-}
-
-/* Overlay title intentionally unused; header shows current path instead. */
+/* Phone overlay: header removed; use main header toggle. */
 
 .files-tab-stats {
   @apply flex items-center gap-3 text-[11px];