fix: Mobile toolbar overlaps with home indicator

app/components/Sidebar/Sidebar.tsx

@@ -321,6 +321,7 @@ const Container = styled(Flex)<ContainerProps>`
   z-index: ${depths.mobileSidebar};
   max-width: 80%;
   min-width: 280px;
+  padding-left: var(--sal);
   ${fadeOnDesktopBackgrounded()}
 
   @media print {

app/editor/components/FloatingToolbar.tsx

@@ -7,6 +7,7 @@ import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
 import { depths, s } from "@shared/styles";
+import { getSafeAreaInsets } from "@shared/utils/browser";
 import { HEADER_HEIGHT } from "~/components/Header";
 import { Portal } from "~/components/Portal";
 import useEventListener from "~/hooks/useEventListener";
@@ -241,12 +242,16 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
 
     if (props.active) {
       const rect = document.body.getBoundingClientRect();
+      const safeAreaInsets = getSafeAreaInsets();
+
       return (
         <ReactPortal>
           <MobileWrapper
             ref={menuRef}
             style={{
-              bottom: `calc(100% - ${height - rect.y}px)`,
+              bottom: `calc(100% - ${
+                height - rect.y - safeAreaInsets.bottom
+              }px)`,
             }}
           >
             {props.children}

shared/styles/globals.ts

@@ -113,4 +113,11 @@ export default createGlobalStyle<Props>`
     outline-offset: -1px;
     outline-width: initial;
   }
+
+  :root {
+    --sat: env(safe-area-inset-top);
+    --sar: env(safe-area-inset-right);
+    --sab: env(safe-area-inset-bottom);
+    --sal: env(safe-area-inset-left);
+  }
 `;

shared/utils/browser.ts

@@ -13,6 +13,32 @@ export function isTouchDevice(): boolean {
   return window.matchMedia?.("(hover: none) and (pointer: coarse)")?.matches;
 }
 
+/**
+ * Returns the safe area insets for the current device.
+ */
+export function getSafeAreaInsets(): {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+} {
+  // Check if CSS environment variables are supported
+  const style = getComputedStyle(document.documentElement);
+  const supportsEnv = window.CSS?.supports?.("top", "env(safe-area-inset-top)");
+
+  if (supportsEnv) {
+    return {
+      top: parseFloat(style.getPropertyValue("--sat") || "0"),
+      right: parseFloat(style.getPropertyValue("--sar") || "0"),
+      bottom: parseFloat(style.getPropertyValue("--sab") || "0"),
+      left: parseFloat(style.getPropertyValue("--sal") || "0"),
+    };
+  }
+
+  // Fallback to zero if not supported
+  return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+
 /**
  * Returns true if the client is running on a Mac.
  */