From 22c1121cb15708a50e4db8e2e62ac134487cbec8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 7 Sep 2026 22:23:49 +0000
Subject: [PATCH] Bring the compose pill's down state in and shrink the
 gradient to the pill

The down-state inset is now 20pt on all three edges rather than the bottom
safe area, so the pill only changes width by 4pt per side on the way down.
The gradient is 12pt tall, just reaching the pill's bottom edge.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QoggCVt9XgpKbjrTZjoJD9
---
 .../composePrompt/ComposePromptGradient.tsx      |  7 +++----
 src/features/composePrompt/ComposePromptPill.tsx | 16 +++++++++-------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/features/composePrompt/ComposePromptGradient.tsx b/src/features/composePrompt/ComposePromptGradient.tsx
index f70ae103da..a4665bb64d 100644
--- a/src/features/composePrompt/ComposePromptGradient.tsx
+++ b/src/features/composePrompt/ComposePromptGradient.tsx
@@ -5,10 +5,9 @@ import {atoms as a, useTheme, utils} from '#/alf'
 import {useComposePromptState} from './context'
 
 /**
- * Tall enough to cover the pill sitting just above the bar, plus a lead-in
- * over the content above it.
+ * Just tall enough to reach the bottom edge of the pill sitting above the bar.
  */
-const GRADIENT_HEIGHT = 32
+const GRADIENT_HEIGHT = 12
 
 /**
  * Fade from the content into the bottom bar's background, drawn above the
@@ -45,7 +44,7 @@ export function ComposePromptGradient() {
           utils.alpha(t.atoms.bg.backgroundColor, 0),
           t.atoms.bg.backgroundColor,
         ]}
-        locations={[0.15, 0.55]}
+        locations={[0, 1]}
         style={[a.flex_1]}
       />
     </Animated.View>
diff --git a/src/features/composePrompt/ComposePromptPill.tsx b/src/features/composePrompt/ComposePromptPill.tsx
index be39f4fcfd..7c2c3ea1e0 100644
--- a/src/features/composePrompt/ComposePromptPill.tsx
+++ b/src/features/composePrompt/ComposePromptPill.tsx
@@ -4,7 +4,6 @@ import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
 } from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {scheduleOnRN} from 'react-native-worklets'
 import {useLingui} from '@lingui/react/macro'
 
@@ -28,11 +27,15 @@ import {useComposePromptMedia} from './useComposePromptMedia'
 
 const AVATAR_SIZE = 32
 /**
- * Horizontal inset of the pill while the bottom bar is showing. Once the bar
- * hides, the inset grows to the bottom safe area for equal spacing, so the
- * closer this is to that, the less the pill changes width on the way down.
+ * Horizontal inset of the pill while the bottom bar is showing.
  */
 const SIDE_MARGIN_UP = tokens.space.lg
+/**
+ * Inset from the left, right and bottom edges once the bar has hidden. Kept
+ * close to the up-state inset so the pill barely changes width on the way
+ * down.
+ */
+const MARGIN_DOWN = tokens.space.xl
 /**
  * Gap between the pill and the top of the bottom bar.
  */
@@ -47,7 +50,6 @@ export function ComposePromptPill() {
   const {visibility, config} = useComposePromptState()
   const {footerMode} = useMinimalShellMode()
   const {footerHeight} = useShellLayout()
-  const insets = useSafeAreaInsets()
   const t = useTheme()
   const {t: l} = useLingui()
   const ax = useAnalytics()
@@ -74,9 +76,9 @@ export function ComposePromptPill() {
   /*
    * The pill sits just above the bar and follows it down as it hides. In the
    * down state it is inset from the left, right and bottom edges by the same
-   * amount, so that its corners are concentric with the device bevels.
+   * amount.
    */
-  const downMargin = Math.max(insets.bottom, tokens.space.lg)
+  const downMargin = MARGIN_DOWN
   const wrapperStyle = useAnimatedStyle(() => {
     const mode = footerMode.get()
     const upBottom = footerHeight.get() + GAP_ABOVE_BAR