fix(mobile): respect Duo safe areas in overlays

apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx

@@ -27,6 +27,8 @@ import {
   findHeaderMenuAction,
 } from "../../components/ui/headerMenu.android";
 import type { AppBarMenuItem } from "../../components/ui/AppBar.types";
+import { deriveBottomControlInsets } from "../../lib/reserved-regions";
+import { useNativeColumnLayoutMetrics } from "../../native/native-layout-metrics";
 import { deviceEnvironment, refreshDeviceHubAccess, useDeviceHubAccess } from "../../state/device";
 import { useEnvironmentQuery } from "../../state/query";
 import { useAtomCommand } from "../../state/use-atom-command";
@@ -75,6 +77,8 @@ function DevicePreviewScreen({
   readonly onClose: () => void;
 }) {
   const insets = useSafeAreaInsets();
+  // NativeColumnContent already insets the sides, so only a book fold moves the reveal handle.
+  const handleBounds = deriveBottomControlInsets(useNativeColumnLayoutMetrics());
   const { themeVariables } = useAppearancePreferences();
   const focused = useIsFocused();
   const [foreground, setForeground] = useState(AppState.currentState !== "background");
@@ -318,7 +322,10 @@ function DevicePreviewScreen({
           accessibilityHint="Shaking the phone also shows them"
           hitSlop={12}
           className="absolute h-6 w-16 items-center justify-center self-center"
-          style={{ top: Math.max(insets.top - 18, 4) }}
+          style={{
+            top: Math.max(insets.top - 18, 4),
+            transform: [{ translateX: (handleBounds.left - handleBounds.right) / 2 }],
+          }}
           onPress={() => setControlsVisible(true)}
         >
           <View className="h-1.5 w-10 rounded-full bg-white/40" />

apps/mobile/src/features/keyboard/CommandPalette.tsx

@@ -22,7 +22,9 @@ import { RowPressable } from "../../components/ui/RowPressable";
 import { AppText as Text } from "../../components/ui/AppText";
 import { SymbolView, type AppSymbolName } from "../../components/ui/AppSymbol";
 import { cn } from "../../lib/cn";
+import { deriveBottomControlInsets } from "../../lib/reserved-regions";
 import { scopedProjectKey, scopedThreadKey } from "../../lib/scopedEntities";
+import { useNativeLayoutMetrics } from "../../native/native-layout-metrics";
 import { T3KeyboardCommands } from "../../native/T3KeyboardCommands";
 import { useProjects, useThreadShell, useThreadShells } from "../../state/entities";
 import { useThreadSearch } from "../../state/queries";
@@ -156,6 +158,9 @@ export function CommandPalette(props: {
   const inputRef = useRef<TextInputInstance>(null);
   const listRef = useRef<FlatList<CommandPaletteItem>>(null);
   const { width, height } = useWindowDimensions();
+  // The palette floats above every column, so it keeps itself inside the window's side insets
+  // and to one side of a book fold.
+  const bounds = deriveBottomControlInsets(useNativeLayoutMetrics());
   const searchEnvironmentIds = useMemo(
     () =>
       environments
@@ -423,7 +428,8 @@ export function CommandPalette(props: {
         <T3KeyboardCommands enabledCommands={PALETTE_COMMANDS} onCommand={onCommand}>
           <KeyboardAvoidingView
             behavior="padding"
-            className="flex-1 items-center justify-center p-4"
+            className="flex-1 items-center justify-center py-4"
+            style={{ paddingLeft: 16 + bounds.left, paddingRight: 16 + bounds.right }}
           >
             <Pressable
               className="absolute inset-0 bg-backdrop"
@@ -436,7 +442,7 @@ export function CommandPalette(props: {
               tintColorClassName="accent-sheet/20"
               fallbackColor={themeVariables["--color-sheet"]}
               style={{
-                width: Math.min(600, width - 32),
+                width: Math.min(600, width - 32 - bounds.left - bounds.right),
                 height: Math.min(520, height - 80),
                 borderRadius: 20,
               }}

apps/mobile/src/features/settings/components/SettingsEnvironmentFilterHeader.tsx

@@ -54,7 +54,6 @@ export function SettingsEnvironmentFilterHeader(props: {
       options={{
         unstable_headerRightItems: () => [
           withNativeGlassHeaderItem({
-            axisBehavior: "horizontalOnly",
             accessibilityLabel: "Filter settings environments and projects",
             icon: { name: filterIcon, type: "sfSymbol" },
             label: "",
@@ -121,7 +120,6 @@ export function SettingsEnvironmentFilterHeader(props: {
           ...(closeSettings
             ? [
                 withNativeGlassHeaderItem({
-                  axisBehavior: "horizontalOnly",
                   accessibilityLabel: "Close settings",
                   icon: { name: "xmark", type: "sfSymbol" },
                   identifier: "settings-close",