diff --git a/web/src/components/misc/NotchSticker.svelte b/web/src/components/misc/NotchSticker.svelte index 22a98ae5..386bb04f 100644 --- a/web/src/components/misc/NotchSticker.svelte +++ b/web/src/components/misc/NotchSticker.svelte @@ -7,6 +7,7 @@ // i spent 4 hours switching between simulators and devices to get the best way to do this $: safeAreaTop = 0; + $: safeAreaBottom = 0; $: state = "hidden"; // "notch", "island", "notch x" const islandValues = [ @@ -24,8 +25,16 @@ .trim(); }; + const getSafeAreaBottom = () => { + const root = document.documentElement; + return getComputedStyle(root) + .getPropertyValue("--safe-area-inset-bottom") + .trim(); + }; + onMount(() => { safeAreaTop = Number(getSafeAreaTop().replace("px", "")); + safeAreaBottom = Number(getSafeAreaBottom().replace("px", "")); }); $: if (safeAreaTop > 20) { @@ -36,6 +45,10 @@ if (xNotch.includes(safeAreaTop)) { state = "notch x"; } + // exception for XR and 11 at regular screen zoom + if (safeAreaTop === 48 && safeAreaBottom === 34) { + state = "notch"; + } } @@ -84,8 +97,12 @@ } } - /* plus iphone size, dynamic island, larger text display mode */ + /* regular & plus iphone size, dynamic island, larger text display mode */ @media screen and (max-width: 375px) { + #cobalt-notch-sticker.island :global(svg) { + height: 26px; + } + #cobalt-notch-sticker.island { padding-top: 11px; } diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index ce6066ac..78421620 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -135,6 +135,7 @@ ); --safe-area-inset-top: env(safe-area-inset-top); + --safe-area-inset-bottom: env(safe-area-inset-bottom); --switcher-padding: var(--sidebar-inner-padding);