diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx index aa1ef69..e65eb37 100644 --- a/web/src/components/Layout.tsx +++ b/web/src/components/Layout.tsx @@ -104,7 +104,7 @@ export function Layout() {
{/* Outer terminal frame with safe area */}
+ style={{ padding: 'var(--safe-top, env(safe-area-inset-top, 1.5rem)) var(--safe-right, env(safe-area-inset-right, 0)) var(--safe-bottom, env(safe-area-inset-bottom, 0.75rem)) var(--safe-left, env(safe-area-inset-left, 0))' }}> {/* Top bar — minimal on mobile */}
@@ -237,7 +237,7 @@ function MobileBottomNav({ return (
+ style={{ paddingBottom: 'var(--safe-bottom, env(safe-area-inset-bottom))' }}> onViewChange('sidebar')}> [SERVERS] diff --git a/web/src/components/MobileNav.tsx b/web/src/components/MobileNav.tsx index a0c8ba3..6294a7e 100644 --- a/web/src/components/MobileNav.tsx +++ b/web/src/components/MobileNav.tsx @@ -47,7 +47,7 @@ export function MobileNav({ activeTab, onTabChange, onToggleDrawer }: MobileNavP
{/* Safe area for phones with bottom notch */} -
+
); } diff --git a/web/src/main.tsx b/web/src/main.tsx index 60553ed..46a5de7 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -5,6 +5,14 @@ import App from './App.tsx'; const isTauri = 'window' in globalThis && '__TAURI_INTERNALS__' in window; if (isTauri) { + // Tauri Android WebView doesn't support CSS env(safe-area-inset-*). + // Set explicit fallbacks via JS. + if (navigator.userAgent.includes('Android')) { + document.documentElement.style.setProperty('--safe-top', '1.5rem'); + document.documentElement.style.setProperty('--safe-bottom', '0.75rem'); + document.documentElement.style.setProperty('--safe-left', '0px'); + document.documentElement.style.setProperty('--safe-right', '0px'); + } const TARGET = 'https://dumpster.dustin.coffee'; const WS_TARGET = 'wss://dumpster.dustin.coffee';