diff --git a/apps/mobile/src/features/threads/ThreadComposer.tsx b/apps/mobile/src/features/threads/ThreadComposer.tsx
index eded9870dc6..409deab2ebc 100644
--- a/apps/mobile/src/features/threads/ThreadComposer.tsx
+++ b/apps/mobile/src/features/threads/ThreadComposer.tsx
@@ -117,32 +117,46 @@ function ComposerSurface(props: {
readonly style: ViewStyle;
readonly isDarkMode: boolean;
}) {
+ // Drop shadow lives on a wrapper: `overflow: "hidden"` on the surface itself
+ // (needed to clip content to the pill shape) would clip the shadow on iOS.
+ const shadowStyle: ViewStyle = {
+ borderRadius: props.style.borderRadius,
+ shadowColor: "#000000",
+ shadowOpacity: props.isDarkMode ? 0.35 : 0.12,
+ shadowRadius: 14,
+ shadowOffset: { width: 0, height: 6 },
+ elevation: 10,
+ };
+
if (isLiquidGlassSupported) {
return (
-
- {props.children}
-
+
+
+ {props.children}
+
+
);
}
return (
-
- {props.children}
+
+
+ {props.children}
+
);
}
@@ -661,8 +675,8 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
paddingTop: isExpanded ? 8 : 6,
paddingBottom: (props.bottomInset ?? 0) + (isExpanded ? 8 : 6),
experimental_backgroundImage: isDarkMode
- ? "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.95) 100%)"
- : "linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.95) 100%)",
+ ? "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.9) 100%)"
+ : "linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.9) 100%)",
}}
>