From e8cfad1266a5f11151e573ada0d749b6720889e0 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 17 Feb 2026 18:13:44 +0000
Subject: [PATCH] fix(ui): anchor fullscreen exit button to viewport

Render the mobile fullscreen exit button at the App root so fixed positioning stays pinned to the top-right regardless of instance header visibility.
---
 packages/ui/src/App.tsx                          | 14 ++++++++++++++
 .../src/components/instance/instance-shell2.tsx  | 16 +---------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 64b40bae..b02861c1 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -2,6 +2,7 @@ import { Component, For, Show, createMemo, createEffect, createSignal, onMount,
 import { Dialog } from "@kobalte/core/dialog"
 import { Toaster } from "solid-toast"
 import useMediaQuery from "@suid/material/useMediaQuery"
+import { Minimize2 } from "lucide-solid"
 import AlertDialog from "./components/alert-dialog"
 import FolderSelectionView from "./components/folder-selection-view"
 import { showConfirmDialog } from "./stores/alerts"
@@ -497,6 +498,19 @@ const App: Component = () => {
         </Dialog.Portal>
       </Dialog>
       <div class="h-screen w-screen flex flex-col" style={{ height: "100dvh", "padding-bottom": "var(--keyboard-offset, 0px)" }}>
+        <Show when={isPhoneLayout() && mobileFullscreenMode()}>
+          <div class="mobile-fullscreen-exit-wrapper">
+            <button
+              type="button"
+              class="message-scroll-button mobile-fullscreen-exit-button"
+              onClick={() => void exitMobileFullscreen()}
+              aria-label={t("instanceShell.fullscreen.exit")}
+              title={t("instanceShell.fullscreen.exit")}
+            >
+              <Minimize2 class="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+        </Show>
         <Show
           when={!hasInstances()}
           fallback={
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index d89bf7c4..70f71d75 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -42,7 +42,7 @@ import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getSessionStatus } from "../../stores/session-status"
-import { Maximize2, Minimize2, ShieldAlert } from "lucide-solid"
+import { Maximize2, ShieldAlert } from "lucide-solid"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -775,20 +775,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           </AppBar>
         </Show>
 
-        <Show when={mobileFullscreen()}>
-          <div class="mobile-fullscreen-exit-wrapper">
-            <button
-              type="button"
-              class="message-scroll-button mobile-fullscreen-exit-button"
-              onClick={props.onExitMobileFullscreen}
-              aria-label={t("instanceShell.fullscreen.exit")}
-              title={t("instanceShell.fullscreen.exit")}
-            >
-              <Minimize2 class="h-5 w-5" aria-hidden="true" />
-            </button>
-          </div>
-        </Show>
-
         <Box
           component="main"
           sx={{ flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column", overflowX: "hidden" }}