Collapse match card header on keyboard open

apps/mobile/ios/Sauci.xcodeproj/project.pbxproj

@@ -505,7 +505,10 @@
 				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -560,7 +563,10 @@
 				);
 				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
 				MTL_ENABLE_DEBUG_INFO = NO;
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

apps/mobile/src/features/chat/components/ChatHeader.tsx

@@ -3,7 +3,14 @@ import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { Image } from 'expo-image';
 import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import Animated, { FadeIn, FadeInDown } from 'react-native-reanimated';
+import Animated, { 
+    FadeIn, 
+    FadeInDown, 
+    useAnimatedKeyboard,
+    useAnimatedStyle,
+    interpolate,
+    Extrapolation
+} from 'react-native-reanimated';
 import { EdgeInsets } from 'react-native-safe-area-context';
 
 import { DecorativeSeparator } from '../../../components/ui';
@@ -31,6 +38,29 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
 }) => {
     const isYesYes = match?.match_type === 'yes_yes';
     
+    // Modern reanimated keyboard hook
+    const keyboard = useAnimatedKeyboard();
+
+    const containerAnimatedStyle = useAnimatedStyle(() => {
+        // Collapse when keyboard height exceeds 50px
+        const animationValue = interpolate(
+            keyboard.height.value,
+            [0, 60],
+            [0, 1],
+            Extrapolation.CLAMP
+        );
+
+        return {
+            opacity: interpolate(animationValue, [0, 1], [1, 0]),
+            maxHeight: interpolate(animationValue, [0, 1], [500, 0]), // Assuming card max height
+            marginTop: interpolate(animationValue, [0, 1], [spacing.sm, 0]),
+            transform: [
+                { scale: interpolate(animationValue, [0, 1], [1, 0.95]) }
+            ],
+            overflow: 'hidden',
+        };
+    });
+
     return (
         <>
             <Animated.View
@@ -102,8 +132,9 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
             {match?.question && (
                 <Animated.View
                     entering={FadeInDown.delay(100).duration(400).springify()}
-                    style={styles.matchCard}
+                    style={[styles.matchCardContainer, containerAnimatedStyle]}
                 >
+                    <View style={styles.matchCard}>
                         {/* Card gradient background */}
                         <LinearGradient
                             colors={isYesYes
@@ -202,6 +233,7 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
                             styles.matchCardBorder,
                             isYesYes && styles.matchCardBorderYesYes
                         ]} pointerEvents="none" />
+                    </View>
                 </Animated.View>
             )}
         </>
@@ -301,10 +333,14 @@ const styles = StyleSheet.create({
         height: 1,
         backgroundColor: `${ACCENT_RGBA}0.15)`,
     },
-    matchCard: {
+    matchCardContainer: {
         marginHorizontal: spacing.md,
-        marginTop: spacing.sm,
-        marginBottom: spacing.xs,
+        // Vertical margins are handled by animation
+        borderRadius: radius.lg,
+        overflow: 'hidden',
+    },
+    matchCard: {
+        // Margins moved to container
         borderRadius: radius.lg,
         paddingVertical: spacing.md,
         paddingHorizontal: spacing.md,