From ce0945840c7d5e429db1b863c145637a7d3f0ff8 Mon Sep 17 00:00:00 2001
From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>
Date: Sat, 5 Sep 2026 11:18:02 -0700
Subject: [PATCH] fix(mobile): even out the working pill's spacing

The floating pill sat 20 above the composer capsule but only a few
points below the last timeline row. Size the offsets from the pill's
real height and the capsule's inset so it sits 8 above the capsule,
and reserve the same 8 above it in the feed's end inset.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../features/threads/floating-working-control.tsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/mobile/src/features/threads/floating-working-control.tsx b/apps/mobile/src/features/threads/floating-working-control.tsx
index cac2686ab218..a429044fccdd 100644
--- a/apps/mobile/src/features/threads/floating-working-control.tsx
+++ b/apps/mobile/src/features/threads/floating-working-control.tsx
@@ -18,8 +18,12 @@ import { SymbolView } from "../../components/AppSymbol";
 import { ControlPill } from "../../components/ControlPill";
 import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 
-const CONTROL_HEIGHT = 44;
-const CONTROL_COMPOSER_GAP = 8;
+const CONTROL_HEIGHT = 38.5; // h-11 with the mobile 14px rem
+// The collapsed composer capsule starts 6 below its overlay's top edge, so
+// the pill sits at (gap - 6) above the overlay to leave the same gap to the
+// capsule as the feed's end inset leaves between it and the last row.
+const CONTROL_GAP = 8;
+const COMPOSER_CAPSULE_INSET = 6;
 const GLASS_MERGE_SPACING = 12;
 const CONTROL_ENTERING = FadeIn.duration(180).reduceMotion(ReduceMotion.System);
 const CONTROL_EXITING = FadeOut.duration(120).reduceMotion(ReduceMotion.System);
@@ -40,7 +44,8 @@ const UniwindGlassContainer = withUniwind(GlassContainer, {
 });
 const AnimatedGlassView = Animated.createAnimatedComponent(UniwindGlassView);
 
-export const FLOATING_WORKING_CONTROL_COVERAGE = CONTROL_HEIGHT + CONTROL_COMPOSER_GAP;
+const CONTROL_OVERLAY_OFFSET = CONTROL_HEIGHT + CONTROL_GAP - COMPOSER_CAPSULE_INSET;
+export const FLOATING_WORKING_CONTROL_COVERAGE = CONTROL_OVERLAY_OFFSET + CONTROL_GAP;
 
 /**
  * What the floating pill says. Syncing and working share one element so the
@@ -81,7 +86,7 @@ export function FloatingWorkingControl(props: {
     <Animated.View
       pointerEvents="box-none"
       className="absolute left-0 right-0 z-20 items-center"
-      style={{ top: -FLOATING_WORKING_CONTROL_COVERAGE }}
+      style={{ top: -CONTROL_OVERLAY_OFFSET }}
       entering={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : CONTROL_ENTERING}
       exiting={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : CONTROL_EXITING}
     >