boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

fix(odin): measured --app-height for standalone-PWA viewports

Browse Source 
Installed PWAs (MIUI especially) compute svh/dvh against a viewport that
includes system UI the layout viewport doesn't have, so the immersive page
still scrolled in standalone mode. AppShell now measures window.innerHeight
into --app-height (refreshed on resize/visualViewport, covering the
minimize-restore stale-viewport Chrome bug and the keyboard), and the
immersive shell + chat size from var(--app-height, 100svh).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-11 08:48:57 +02:00
parent d9cf8f53e8
commit 1293da7f25
2 changed files with 29 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/admin/components/odin/OdinChat.tsx
View File

@@ -437,8 +437,13 @@ export default function OdinChat() {
// page never scrolls and the chat's message list scrolls internally.
// Desktop: svh === vh.
// Mobile is immersive (AppShell hides its header and main padding on
// /odin): the chat owns the whole viewport, full-bleed.
height: { xs: "100svh", md: "calc(100svh - 100px)" },
// /odin): the chat owns the whole viewport, full-bleed. --app-height
// is AppShell's live window.innerHeight measurement — standalone-PWA
// viewports misreport svh/dvh (MIUI), only the measured value fits.
height: {
xs: "var(--app-height, 100svh)",
md: "calc(100svh - 100px)",
},
display: "flex",
// Longhand on purpose: a responsive `border` shorthand lands in a
// media query AFTER borderColor and resets the color to black.

23
src/admin/ui/AppShell.tsx
View File

@@ -28,6 +28,27 @@ export default function AppShell() {
// button. Desktop keeps the normal shell.
const immersiveOnMobile = location.pathname === "/odin";
// Installed-PWA (standalone) viewports lie to CSS units: on MIUI/Android
// svh/dvh are computed against a viewport that includes system UI the real
// layout viewport doesn't have, leaving scroll room no unit can remove
// (and Chrome can serve a stale viewport after minimize/restore). Measure
// the truth — window.innerHeight — into --app-height and keep it fresh;
// immersive layouts size from it with an svh fallback.
useEffect(() => {
if (!immersiveOnMobile) return;
const root = document.documentElement;
const set = () =>
root.style.setProperty("--app-height", `${window.innerHeight}px`);
set();
window.addEventListener("resize", set);
window.visualViewport?.addEventListener("resize", set);
return () => {
window.removeEventListener("resize", set);
window.visualViewport?.removeEventListener("resize", set);
root.style.removeProperty("--app-height");
};
}, [immersiveOnMobile]);
const handleLogout = useCallback(() => {
setLoggingOut(true);
setMobileOpen(false);
@@ -92,7 +113,7 @@ export default function AppShell() {
// makes body scroll impossible regardless of dvh interpretation.
minHeight: immersiveOnMobile ? { xs: 0, md: "100dvh" } : "100dvh",
...(immersiveOnMobile && {
height: { xs: "100svh", md: "auto" },
height: { xs: "var(--app-height, 100svh)", md: "auto" },
overflow: { xs: "hidden", md: "visible" },
}),
}}