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%)", }} >