fix: remove env() from CSS, set safe-area via JS only
|
After Width: | Height: | Size: 502 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
@@ -104,7 +104,7 @@ export function Layout() {
|
|||||||
<div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col">
|
<div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col">
|
||||||
{/* Outer terminal frame with safe area */}
|
{/* Outer terminal frame with safe area */}
|
||||||
<div className="flex-1 terminal-border bg-gb-bg-h flex flex-col min-h-0"
|
<div className="flex-1 terminal-border bg-gb-bg-h flex flex-col min-h-0"
|
||||||
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))' }}>
|
style={{ padding: 'var(--safe-top, 0.25rem) var(--safe-right, 0) var(--safe-bottom, 0) var(--safe-left, 0)' }}>
|
||||||
|
|
||||||
{/* Top bar — minimal on mobile */}
|
{/* 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">
|
<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 (
|
return (
|
||||||
<div className="md:hidden flex items-center bg-gb-bg-h border-t border-gb-bg-t shrink-0"
|
<div className="md:hidden flex items-center bg-gb-bg-h border-t border-gb-bg-t shrink-0"
|
||||||
style={{ paddingBottom: 'var(--safe-bottom, env(safe-area-inset-bottom))' }}>
|
style={{ paddingBottom: 'var(--safe-bottom)' }}>
|
||||||
<NavTab active={mobileView === 'sidebar'} onClick={() => onViewChange('sidebar')}>
|
<NavTab active={mobileView === 'sidebar'} onClick={() => onViewChange('sidebar')}>
|
||||||
[SERVERS]
|
[SERVERS]
|
||||||
</NavTab>
|
</NavTab>
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export function MobileNav({ activeTab, onTabChange, onToggleDrawer }: MobileNavP
|
|||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
</div>
|
</div>
|
||||||
{/* Safe area for phones with bottom notch */}
|
{/* Safe area for phones with bottom notch */}
|
||||||
<div className="h-[var(--safe-bottom,env(safe-area-inset-bottom))]" />
|
<div className="h-[var(--safe-bottom)]" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,13 +5,19 @@ import App from './App.tsx';
|
|||||||
|
|
||||||
const isTauri = 'window' in globalThis && '__TAURI_INTERNALS__' in window;
|
const isTauri = 'window' in globalThis && '__TAURI_INTERNALS__' in window;
|
||||||
if (isTauri) {
|
if (isTauri) {
|
||||||
// Tauri Android WebView doesn't support CSS env(safe-area-inset-*).
|
// WebView safe-area fallbacks: Android doesn't support CSS env(), and
|
||||||
// Set explicit fallbacks via JS.
|
// Linux WebKitGTK chokes on env() inside var(). Set explicit values via JS.
|
||||||
if (navigator.userAgent.includes('Android')) {
|
if (navigator.userAgent.includes('Android')) {
|
||||||
document.documentElement.style.setProperty('--safe-top', '1.5rem');
|
document.documentElement.style.setProperty('--safe-top', '1.5rem');
|
||||||
document.documentElement.style.setProperty('--safe-bottom', '0.75rem');
|
document.documentElement.style.setProperty('--safe-bottom', '0.75rem');
|
||||||
document.documentElement.style.setProperty('--safe-left', '0px');
|
document.documentElement.style.setProperty('--safe-left', '0px');
|
||||||
document.documentElement.style.setProperty('--safe-right', '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 TARGET = 'https://dumpster.dustin.coffee';
|
||||||
const WS_TARGET = 'wss://dumpster.dustin.coffee';
|
const WS_TARGET = 'wss://dumpster.dustin.coffee';
|
||||||
|
|||||||