fix: Mobile toolbar overlaps with home indicator (#9119)

This commit is contained in:
Tom Moor
2025-05-02 08:19:48 -04:00
committed by GitHub
parent 3602198cd8
commit 96d6987858
4 changed files with 40 additions and 1 deletions
+26
View File
@@ -13,6 +13,32 @@ export function isTouchDevice(): boolean {
return window.matchMedia?.("(hover: none) and (pointer: coarse)")?.matches;
}
/**
* Returns the safe area insets for the current device.
*/
export function getSafeAreaInsets(): {
top: number;
right: number;
bottom: number;
left: number;
} {
// Check if CSS environment variables are supported
const style = getComputedStyle(document.documentElement);
const supportsEnv = window.CSS?.supports?.("top", "env(safe-area-inset-top)");
if (supportsEnv) {
return {
top: parseFloat(style.getPropertyValue("--sat") || "0"),
right: parseFloat(style.getPropertyValue("--sar") || "0"),
bottom: parseFloat(style.getPropertyValue("--sab") || "0"),
left: parseFloat(style.getPropertyValue("--sal") || "0"),
};
}
// Fallback to zero if not supported
return { top: 0, right: 0, bottom: 0, left: 0 };
}
/**
* Returns true if the client is running on a Mac.
*/