Fix nav menu overlapping tab bar

Also allow custom padding into safeBoundingBoxPadding function

src/components/nav-menu.jsx

@@ -6,6 +6,7 @@ import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
 
 import { api } from '../utils/api';
+import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import states from '../utils/states';
 import store from '../utils/store';
 
@@ -52,6 +53,13 @@ function NavMenu(props) {
   const buttonRef = useRef();
   const [menuState, setMenuState] = useState(undefined);
 
+  const boundingBoxPadding = safeBoundingBoxPadding([
+    0,
+    0,
+    snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0,
+    0,
+  ]);
+
   return (
     <>
       <button
@@ -104,7 +112,7 @@ function NavMenu(props) {
         viewScroll="close"
         position="anchor"
         align="center"
-        boundingBoxPadding="8 8 8 8"
+        boundingBoxPadding={boundingBoxPadding}
         unmountOnClose
       >
         <section>

src/utils/safe-bounding-box-padding.js

@@ -3,7 +3,8 @@ import mem from 'mem';
 const root = document.documentElement;
 const style = getComputedStyle(root);
 const defaultBoundingBoxPadding = 8;
-function _safeBoundingBoxPadding() {
+function _safeBoundingBoxPadding(paddings = []) {
+  // paddings = [top, right, bottom, left]
   // Get safe area inset variables from root
   const safeAreaInsetTop = style.getPropertyValue('--sai-top');
   const safeAreaInsetRight = style.getPropertyValue('--sai-right');
@@ -15,7 +16,10 @@ function _safeBoundingBoxPadding() {
     safeAreaInsetBottom,
     safeAreaInsetLeft,
   ]
-    .map((v) => parseInt(v, 10) || defaultBoundingBoxPadding)
+    .map(
+      (v, i) =>
+        (parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
+    )
     .join(' ');
   // console.log(str);
   return str;