From 2122e87e66d32e9aa8047dc736803ea4d0ec37a1 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 11 Sep 2024 16:41:04 +0600
Subject: [PATCH] web/NotchSticker: fix sticking out on XR and 11

---
 web/src/components/misc/NotchSticker.svelte | 19 ++++++++++++++++++-
 web/src/routes/+layout.svelte               |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

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";
+        }
     }
 </script>
 
@@ -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);