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>
This commit is contained in:
@@ -45,7 +45,7 @@ export default function AppShell() {
|
|||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
minHeight: "100vh",
|
minHeight: "100dvh",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
bgcolor: "background.default",
|
bgcolor: "background.default",
|
||||||
@@ -74,12 +74,12 @@ export default function AppShell() {
|
|||||||
duration: loggingOut ? 0.4 : 0.25,
|
duration: loggingOut ? 0.4 : 0.25,
|
||||||
ease: [0.4, 0, 0.2, 1],
|
ease: [0.4, 0, 0.2, 1],
|
||||||
}}
|
}}
|
||||||
style={{ minHeight: "100vh" }}
|
style={{ minHeight: "100dvh" }}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
minHeight: "100vh",
|
minHeight: "100dvh",
|
||||||
bgcolor: "background.default",
|
bgcolor: "background.default",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user