From f509e249426e2010c06147c4967b557b77c22682 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Thu, 11 Jun 2026 08:42:04 +0200
Subject: [PATCH] fix(odin): kill body scroll on immersive mobile (MIUI dvh
 quirk)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Xiaomi Chrome keeps 100dvh at the large-viewport size while the URL bar
overlays the page, so the shell's 100dvh min-height left the document one
bar-height taller than the screen (scrollable + a strip under the
composer). The immersive route now sizes the document to exactly 100svh
with hidden overflow down the chain — body scroll is impossible regardless
of the browser's dvh interpretation. Other routes unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/admin/ui/AppShell.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/admin/ui/AppShell.tsx b/src/admin/ui/AppShell.tsx
index 6ba87c6..df71825 100644
--- a/src/admin/ui/AppShell.tsx
+++ b/src/admin/ui/AppShell.tsx
@@ -79,13 +79,22 @@ export default function AppShell() {
           duration: loggingOut ? 0.4 : 0.25,
           ease: [0.4, 0, 0.2, 1],
         }}
-        style={{ minHeight: "100dvh" }}
       >
         <Box
           sx={{
             display: "flex",
-            minHeight: "100dvh",
             bgcolor: "background.default",
+            // Immersive mobile pages must make the DOCUMENT exactly the
+            // small-viewport height and clip it: MIUI/Xiaomi Chrome keeps
+            // 100dvh at the large-viewport size while the URL bar overlays,
+            // so a 100dvh min-height leaves the page scrollable by the bar
+            // height (invisible in desktop emulation). svh + hidden overflow
+            // makes body scroll impossible regardless of dvh interpretation.
+            minHeight: immersiveOnMobile ? { xs: 0, md: "100dvh" } : "100dvh",
+            ...(immersiveOnMobile && {
+              height: { xs: "100svh", md: "auto" },
+              overflow: { xs: "hidden", md: "visible" },
+            }),
           }}
         >
           <Drawer
@@ -128,6 +137,7 @@ export default function AppShell() {
             sx={{
               flex: 1,
               minWidth: 0,
+              minHeight: 0,
               display: "flex",
               flexDirection: "column",
             }}
@@ -173,6 +183,10 @@ export default function AppShell() {
                 flex: 1,
                 px: immersiveOnMobile ? { xs: 0, md: 3 } : { xs: 2, md: 3 },
                 pb: immersiveOnMobile ? { xs: 0, md: 4 } : 4,
+                ...(immersiveOnMobile && {
+                  minHeight: 0,
+                  overflow: { xs: "hidden", md: "visible" },
+                }),
               }}
             >
               <Outlet />