making the crisp chatbox button sit above the bottom navigator when in mobile

src/app/UserWrapper.tsx

@@ -13,7 +13,7 @@ import { CssBaseline, Theme } from '@mui/material'
 import { AppThemeProvider } from 'theme/AppThemeProvider'
 import HTTPProvider from 'providers/http'
 import { Crisp } from "crisp-sdk-web";
-import { useSnackbar } from 'hooks'
+import { useMobile, useSnackbar } from 'hooks'
 // import FirmwareLoader from './FirmwareLoader'
 
 const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
@@ -67,6 +67,7 @@ export default function UserWrapper(props: Props) {
   const hasFetched = useRef(false);
   const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
   const snackbar = useSnackbar()
+  const isMobile = useMobile()
 
   const user_id = or(useAuth.user?.sub, "")
 
@@ -128,6 +129,57 @@ export default function UserWrapper(props: Props) {
       Crisp.setTokenId(global?.user.id()); // e.g., your DB user ID
     }
   }, [global]);
+
+  // useEffect(() => {
+  //   if (window.$crisp) {
+  //     if (isMobile) {
+  //       $crisp.push(["config", "position:offset", [20, 120]]);
+  //     } else {
+  //       $crisp.push(["config", "position:offset", [20, 20]]);
+  //     }
+  //   }
+  // }, [isMobile]);
+
+  // useEffect(() => {
+  //   console.log("crisb")
+  //   const crispEl = document.getElementById("crisp-chatbox");
+  //   console.log(crispEl)
+  //   if (crispEl) {
+  //     if (isMobile) {
+  //       console.log("setting margin")
+  //       crispEl.style.setProperty("margin-bottom", "180px", "important");
+  //     } else {
+  //       crispEl.style.setProperty("margin-bottom", "0px", "important");
+  //     }
+  //   }
+  // }, [isMobile]);
+
+  useEffect(() => {
+    let style = document.getElementById("crisp-offset-override");
+    if (!style) {
+      style = document.createElement("style");
+      style.id = "crisp-offset-override";
+      document.head.appendChild(style);
+    }
+
+    console.log(isMobile)
+
+    if (isMobile) {
+      console.log("isMobile")
+      style.textContent = `
+        #crisp-chatbox [aria-label="Open chat"] {
+          bottom: 6em !important;
+        }
+        // #crisp-chatbox [data-visible][style*="width: 360px"] {
+        //   bottom: 180px !important;
+        // }
+      `;
+    } else {
+      style.textContent = "";
+    }
+
+    return () => style?.remove();
+  }, [isMobile]);
   
   useEffect(() => {
     if (loading) return;