+ 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';