Make sure context menu doesn't exceed safe areas

src/components/status.jsx

@@ -570,7 +570,7 @@ function Status({
       onContextMenu={(e) => {
         if (size === 'l') return;
         if (e.metaKey) return;
-        console.log('context menu', e);
+        // console.log('context menu', e);
         const link = e.target.closest('a');
         if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
         e.preventDefault();
@@ -602,7 +602,7 @@ function Status({
             },
           }}
           overflow="auto"
-          boundingBoxPadding="8 8 8 8"
+          boundingBoxPadding={safeBoundingBoxPadding()}
           unmountOnClose
         >
           {StatusMenuItems}
@@ -1601,4 +1601,25 @@ function getHTMLText(html) {
   return div.innerText.replace(/[\r\n]{3,}/g, '\n\n').trim();
 }
 
+const root = document.documentElement;
+const defaultBoundingBoxPadding = 8;
+function safeBoundingBoxPadding() {
+  // Get safe area inset variables from root
+  const style = getComputedStyle(root);
+  const safeAreaInsetTop = style.getPropertyValue('--sai-top');
+  const safeAreaInsetRight = style.getPropertyValue('--sai-right');
+  const safeAreaInsetBottom = style.getPropertyValue('--sai-bottom');
+  const safeAreaInsetLeft = style.getPropertyValue('--sai-left');
+  const str = [
+    safeAreaInsetTop,
+    safeAreaInsetRight,
+    safeAreaInsetBottom,
+    safeAreaInsetLeft,
+  ]
+    .map((v) => parseInt(v, 10) || defaultBoundingBoxPadding)
+    .join(' ');
+  // console.log(str);
+  return str;
+}
+
 export default memo(Status);

src/index.css

@@ -2,6 +2,11 @@
 @custom-media --viewport-medium (min-width: 40em);
 
 :root {
+  --sai-top: env(safe-area-inset-top);
+  --sai-right: env(safe-area-inset-right);
+  --sai-bottom: env(safe-area-inset-bottom);
+  --sai-left: env(safe-area-inset-left);
+
   --text-size: 16px;
   --main-width: 40em;
   text-size-adjust: none;