34 lines
1014 B
TypeScript
34 lines
1014 B
TypeScript
"use client"
|
|
|
|
import { useEffect, useLayoutEffect } from "react"
|
|
import { isTauriRuntime } from "@/lib/platform"
|
|
|
|
/** Native shell: safe-area CSS vars + html class for padding under status bar. */
|
|
export function NativeShellChrome() {
|
|
useLayoutEffect(() => {
|
|
if (!isTauriRuntime()) return
|
|
|
|
const root = document.documentElement
|
|
root.classList.add("native-shell")
|
|
|
|
// Android WebView often reports env(safe-area-inset-top) as 0 until Chromium 144+.
|
|
const probe = document.createElement("div")
|
|
probe.style.cssText =
|
|
"position:fixed;top:0;left:0;padding-top:env(safe-area-inset-top);visibility:hidden;pointer-events:none"
|
|
document.body.appendChild(probe)
|
|
const envTop = parseFloat(getComputedStyle(probe).paddingTop) || 0
|
|
probe.remove()
|
|
|
|
if (envTop < 1) {
|
|
root.style.setProperty("--native-safe-top", "28px")
|
|
}
|
|
|
|
return () => {
|
|
root.classList.remove("native-shell")
|
|
root.style.removeProperty("--native-safe-top")
|
|
}
|
|
}, [])
|
|
|
|
return null
|
|
}
|