From 78cd7cf2d824a09f9b2e3265be4a842e9fd06339 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Tue, 9 Jun 2026 21:27:10 +0200
Subject: [PATCH] fix(shell): use 100dvh instead of 100vh so mobile has no
 phantom scroll

AppShell sized the shell with minHeight:100vh while #root (GlobalStyles) and the
Odin pane (OdinChat) use 100dvh. On mobile 100vh = the large viewport (address
bar hidden), a chrome-bar taller than the visible 100dvh, so the shell floor
pushed the document a few px over and html{overflow-x:hidden} (the page scroller)
turned it into a small downward scroll. Most visible on /odin (a fixed 100dvh
pane that otherwise never scrolls the page). Fixes every page on mobile; desktop
unchanged (100vh==100dvh there).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/ui/AppShell.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/admin/ui/AppShell.tsx b/src/admin/ui/AppShell.tsx
index efa9606..7f3d0cf 100644
--- a/src/admin/ui/AppShell.tsx
+++ b/src/admin/ui/AppShell.tsx
@@ -45,7 +45,7 @@ export default function AppShell() {
         <Box
           sx={{
             display: "flex",
-            minHeight: "100vh",
+            minHeight: "100dvh",
             alignItems: "center",
             justifyContent: "center",
             bgcolor: "background.default",
@@ -74,12 +74,12 @@ export default function AppShell() {
           duration: loggingOut ? 0.4 : 0.25,
           ease: [0.4, 0, 0.2, 1],
         }}
-        style={{ minHeight: "100vh" }}
+        style={{ minHeight: "100dvh" }}
       >
         <Box
           sx={{
             display: "flex",
-            minHeight: "100vh",
+            minHeight: "100dvh",
             bgcolor: "background.default",
           }}
         >