fix(mobile): keep the composer text box off the model button on RTL phones

apps/mobile/src/features/threads/ThreadComposer.tsx

@@ -32,7 +32,7 @@ import {
 import { StackActions, useFocusEffect, useNavigation } from "@react-navigation/native";
 import type { ReactNode } from "react";
 import { useEffect, useEffectEvent, useRef, useState, type RefObject } from "react";
-import { Keyboard, Platform, View, type ViewStyle } from "react-native";
+import { I18nManager, Keyboard, Platform, View, type ViewStyle } from "react-native";
 import { composerImageGallery } from "../../lib/composerImageGallery";
 import { filePreviewGallery } from "../../lib/filePreviewGallery";
 import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
@@ -97,6 +97,7 @@ import {
   resolveComposerSendPresentation,
   type ComposerSendPresentation,
 } from "./composerSendPresentation";
+import { compactEditorInsets } from "./compactEditorInsets";
 import { ComposerCommandPopover } from "./ComposerCommandPopover";
 import { ComposerPopoverAnchor } from "./ComposerPopoverAnchor";
 import { ComposerQueuedEditAttachments } from "./ComposerQueuedEdit";
@@ -157,12 +158,19 @@ function useCompactComposerEditor(text: ScaledTextRole, value: string) {
     (contentHeight > text.lineHeight * 1.5 ||
       (compactWidth > 0 && contentSize.width > compactWidth));
   const compactRowHeight = Math.max(44, minimum);
+  const isRTL = I18nManager.isRTL;
   const editorStyle = useAnimatedStyle(() => ({
     position: "absolute",
     overflow: "hidden",
     height,
-    left: isExpanded ? 14 : editorX.value + 4,
-    right: isExpanded ? 14 : rowWidth.value - editorX.value - editorWidth.value + 4,
+    ...(isExpanded
+      ? { left: 14, right: 14 }
+      : compactEditorInsets({
+          slotX: editorX.value,
+          slotWidth: editorWidth.value,
+          rowWidth: rowWidth.value,
+          isRTL,
+        })),
     // The full-width editor must move above the controls in the same frame it widens.
     bottom: isExpanded ? 52 : (compactRowHeight - minimum) / 2,
   }));

apps/mobile/src/features/threads/compactEditorInsets.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { compactEditorInsets } from "./compactEditorInsets";
+
+describe("compact editor insets", () => {
+  it("keeps the measured slot position in left-to-right layouts", () => {
+    expect(compactEditorInsets({ slotX: 48, slotWidth: 200, rowWidth: 360, isRTL: false })).toEqual(
+      { left: 52, right: 116 },
+    );
+  });
+
+  it("swaps the insets in right-to-left layouts so the editor stays over its slot", () => {
+    expect(compactEditorInsets({ slotX: 112, slotWidth: 200, rowWidth: 360, isRTL: true })).toEqual(
+      { left: 52, right: 116 },
+    );
+  });
+});

apps/mobile/src/features/threads/compactEditorInsets.ts

@@ -0,0 +1,17 @@
+const COMPACT_EDITOR_SLOT_INSET = 4;
+
+/**
+ * Places the floating editor over its slot. Layout x is measured from the left,
+ * but React Native swaps left and right styles in RTL, so the insets trade places.
+ */
+export function compactEditorInsets(input: {
+  readonly slotX: number;
+  readonly slotWidth: number;
+  readonly rowWidth: number;
+  readonly isRTL: boolean;
+}): { left: number; right: number } {
+  "worklet";
+  const fromLeft = input.slotX + COMPACT_EDITOR_SLOT_INSET;
+  const fromRight = input.rowWidth - input.slotX - input.slotWidth + COMPACT_EDITOR_SLOT_INSET;
+  return input.isRTL ? { left: fromRight, right: fromLeft } : { left: fromLeft, right: fromRight };
+}