fix(android): space the New thread FAB 16dp from the edge and tab bar

apps/mobile/src/features/home/AndroidHomeFab.android.tsx

@@ -7,7 +7,10 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { NewThreadButton } from "../../components/NewThreadButton";
-import type { AndroidHomeFabLayout as SharedAndroidHomeFabLayout } from "./AndroidHomeFab.shared";
+import {
+  androidHomeFabPosition,
+  type AndroidHomeFabLayout as SharedAndroidHomeFabLayout,
+} from "./AndroidHomeFab.shared";
 import { useWorkspaceState } from "../../state/workspace";
 import { FabScrollContext } from "./FabScrollContext";
 import { updateFabScroll } from "./fab-scroll";
@@ -42,12 +45,8 @@ export function AndroidHomeFabLayout(props: ComponentProps<typeof SharedAndroidH
           extended
           expanded={expanded}
           onPress={props.onStartNewTask}
-          className="absolute right-5"
-          style={{
-            bottom: props.sidebar
-              ? Math.max(insets.bottom, 12) + 6
-              : Math.max(insets.bottom, 16) + 16,
-          }}
+          className="absolute"
+          style={androidHomeFabPosition(insets.bottom, props.sidebar)}
         />
       ) : null}
     </View>

apps/mobile/src/features/home/AndroidHomeFab.shared.tsx

@@ -8,3 +8,15 @@ export function AndroidHomeFabLayout(props: {
 }) {
   return <>{props.children}</>;
 }
+
+/**
+ * The filter button stacks on the New thread FAB from this same origin so the two
+ * cannot drift apart. In dp rather than a rem class so Material's 16dp margin does
+ * not grow with the app's text size.
+ */
+export function androidHomeFabPosition(safeAreaBottom: number, sidebar: boolean | undefined) {
+  return {
+    right: 16,
+    bottom: sidebar ? Math.max(safeAreaBottom, 12) + 6 : safeAreaBottom + 16,
+  };
+}

apps/mobile/src/features/home/ThreadListToolbar.tsx

@@ -24,6 +24,7 @@ import { useWorkspaceState } from "../../state/workspace";
 import { useAndroidControlSizing } from "../../components/ui/useAndroidControlSizing";
 import { useToolbarLayout } from "../../components/ui/useToolbarLayout";
 import { PullRequestGlyph } from "../pull-requests/pullRequestGlyphs";
+import { androidHomeFabPosition } from "./AndroidHomeFab.shared";
 
 /** One toolbar height for the compact list and expanded sidebar, including search. */
 export function ThreadListToolbar(props: {
@@ -46,6 +47,7 @@ export function ThreadListToolbar(props: {
   const listFocused =
     homeFocused && (workspace === null || workspace.state.selectedTab === "threads");
   const { fabSize } = useAndroidControlSizing();
+  const fab = androidHomeFabPosition(insets.bottom, props.sidebar);
   const { height: toolbarHeight, ...headerPadding } = useToolbarLayout();
   const { state } = useWorkspaceState();
   const { onRequestVisibility, onSearchQueryChange } = props;
@@ -150,13 +152,8 @@ export function ThreadListToolbar(props: {
       </View>
       {state.hasConnections ? (
         <View
-          className="absolute right-5 z-[5]"
-          style={{
-            bottom:
-              (props.sidebar ? Math.max(insets.bottom, 12) + 6 : Math.max(insets.bottom, 16) + 16) +
-              fabSize +
-              8,
-          }}
+          className="absolute z-[5]"
+          style={{ right: fab.right, bottom: fab.bottom + fabSize + 8 }}
         >
           <AndroidAnchoredMenu actions={props.filterActions} onPressAction={props.onFilterAction}>
             {(open) => (