Fix mobile autocomplete sidebar layering

packages/app/src/components/ui/autocomplete-popover.tsx

@@ -10,6 +10,7 @@ import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
 import { Autocomplete, type AutocompleteOption } from "@/components/ui/autocomplete";
+import { useFloatingPanelPortalHostName } from "@/components/ui/floating-panel-portal";
 import { SPACING } from "@/styles/theme";
 import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
 
@@ -56,6 +57,7 @@ export function AutocompletePopover({
   const [anchorRect, setAnchorRect] = useState<Rect | null>(null);
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
+  const portalHostName = useFloatingPanelPortalHostName();
 
   const { height: rawKeyboardHeight } = useReanimatedKeyboardAnimation();
   const bottomInsetSV = useSharedValue(insets.bottom);
@@ -127,7 +129,7 @@ export function AutocompletePopover({
   if (!visible || !anchorRect || !baseStyle) return null;
 
   return (
-    <Portal>
+    <Portal hostName={portalHostName}>
       <View style={styles.overlay} pointerEvents="box-none">
         <Animated.View testID="composer-autocomplete-popover" style={composedStyle}>
           <Autocomplete

packages/app/src/components/ui/floating-panel-portal.tsx

@@ -0,0 +1,32 @@
+import { createContext, type ReactElement, type ReactNode, useContext } from "react";
+import { PortalHost } from "@gorhom/portal";
+
+export const DEFAULT_FLOATING_PANEL_PORTAL_HOST = "content-floating-panels";
+
+const FloatingPanelPortalHostNameContext = createContext(DEFAULT_FLOATING_PANEL_PORTAL_HOST);
+
+export function FloatingPanelPortalHostNameProvider({
+  hostName,
+  children,
+}: {
+  hostName: string;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <FloatingPanelPortalHostNameContext.Provider value={hostName}>
+      {children}
+    </FloatingPanelPortalHostNameContext.Provider>
+  );
+}
+
+export function useFloatingPanelPortalHostName(): string {
+  return useContext(FloatingPanelPortalHostNameContext);
+}
+
+export function FloatingPanelPortalHost({
+  name = DEFAULT_FLOATING_PANEL_PORTAL_HOST,
+}: {
+  name?: string;
+}): ReactElement {
+  return <PortalHost name={name} />;
+}