fix: remove env() from CSS, set safe-area via JS only

web/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "dumpsterChat",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "identifier": "coffee.dustin.dumpster",
   "build": {
     "frontendDist": "../dist",

web/src/components/Layout.tsx

@@ -104,7 +104,7 @@ export function Layout() {
     <div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col">
       {/* Outer terminal frame with safe area */}
       <div className="flex-1 terminal-border bg-gb-bg-h flex flex-col min-h-0"
-        style={{ padding: 'max(env(safe-area-inset-top), 1.5rem) max(env(safe-area-inset-right), 0) max(env(safe-area-inset-bottom), 0.75rem) max(env(safe-area-inset-left), 0)' }}>
+        style={{ padding: 'var(--safe-top, 0.25rem) var(--safe-right, 0) var(--safe-bottom, 0) var(--safe-left, 0)' }}>
 
         {/* Top bar — minimal on mobile */}
         <div className="flex items-center justify-between px-2 md:px-3 py-1 border-b border-gb-bg-t bg-gb-bg-s gap-1">
@@ -237,7 +237,7 @@ function MobileBottomNav({
 
   return (
     <div className="md:hidden flex items-center bg-gb-bg-h border-t border-gb-bg-t shrink-0"
-      style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
+      style={{ paddingBottom: 'var(--safe-bottom)' }}>
       <NavTab active={mobileView === 'sidebar'} onClick={() => onViewChange('sidebar')}>
         [SERVERS]
       </NavTab>

web/src/components/MobileNav.tsx

@@ -47,7 +47,7 @@ export function MobileNav({ activeTab, onTabChange, onToggleDrawer }: MobileNavP
         <ThemeToggle />
       </div>
       {/* Safe area for phones with bottom notch */}
-      <div className="h-[env(safe-area-inset-bottom)]" />
+      <div className="h-[var(--safe-bottom)]" />
     </div>
   );
 }

web/src/main.tsx

@@ -5,6 +5,20 @@ import App from './App.tsx';
 
 const isTauri = 'window' in globalThis && '__TAURI_INTERNALS__' in window;
 if (isTauri) {
+  // WebView safe-area fallbacks: Android doesn't support CSS env(), and
+  // Linux WebKitGTK chokes on env() inside var(). Set explicit values 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');
+  } else {
+    // Linux / macOS Tauri — no notch, but body has default padding already
+    document.documentElement.style.setProperty('--safe-top', '0px');
+    document.documentElement.style.setProperty('--safe-bottom', '0px');
+    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';