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.
This commit is contained in:
Shantur Rathore
2026-02-17 18:13:44 +00:00
parent 3f82dd21fe
commit e8cfad1266
2 changed files with 15 additions and 15 deletions

View File

@@ -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={