From f9595ffff8555d4ff2d1e88907ca02322639768e Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Sat, 21 Jun 2025 04:18:29 +0800
Subject: [PATCH] fix: compatible with android for summary modal

---
 apps/mobile/src/modules/ai/summary.tsx | 60 ++++++++++++++------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/apps/mobile/src/modules/ai/summary.tsx b/apps/mobile/src/modules/ai/summary.tsx
index a11798125..3cbbf2bf1 100644
--- a/apps/mobile/src/modules/ai/summary.tsx
+++ b/apps/mobile/src/modules/ai/summary.tsx
@@ -13,6 +13,7 @@ import {
   StyleSheet,
   Text,
   TextInput,
+  TouchableOpacity,
   View,
 } from "react-native"
 import Animated, {
@@ -108,13 +109,13 @@ export const AISummary: FC<{
           </MaskedView>
         </View>
         {summaryTextForSheet && (
-          <Pressable
+          <TouchableOpacity
             onPress={() => setSheetOpen(true)}
             className="bg-quaternary-system-fill rounded-full p-1.5 active:opacity-70"
             hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
           >
             <CopyCuteReIcon width={14} height={14} color={purpleColor} />
-          </Pressable>
+          </TouchableOpacity>
         )}
       </View>
       <Animated.View style={animatedContentStyle}>
@@ -239,33 +240,36 @@ const SelectableTextSheet: FC<{
       onRequestClose={handleClose}
       animationType="fade"
       statusBarTranslucent
+      navigationBarTranslucent
     >
-      <Pressable onPress={handleClose} style={StyleSheet.absoluteFill}>
-        <View className="bg-black/40" style={StyleSheet.absoluteFill} />
-      </Pressable>
-      <Animated.View
-        className="bg-system-background absolute inset-x-0 bottom-0 max-h-[70%] overflow-hidden rounded-t-2xl border-t-zinc-200 p-4 dark:border-t-zinc-800"
-        style={[{ paddingBottom: insets.bottom + 10 }, sheetAnimatedStyle]}
-      >
-        <View className="mb-4 flex-row items-center justify-between">
-          <Pressable
-            onPress={handleCopyAll}
-            className="rounded-full bg-zinc-100 p-2 active:opacity-80 dark:bg-zinc-800"
-          >
-            <CopyCuteReIcon width={18} height={18} color={textColor} />
-          </Pressable>
-          <Text className="text-label text-lg font-semibold">AI Summary</Text>
-          <Pressable
-            onPress={handleClose}
-            className="rounded-full bg-zinc-100 p-2 active:opacity-80 dark:bg-zinc-800"
-          >
-            <CloseCuteReIcon width={18} height={18} color={textColor} />
-          </Pressable>
-        </View>
-        <ScrollView showsVerticalScrollIndicator={false}>
-          <SelectableText className="text-label text-base leading-6">{text}</SelectableText>
-        </ScrollView>
-      </Animated.View>
+      <View className="relative max-h-screen min-h-screen w-screen">
+        <Pressable onPress={handleClose} style={StyleSheet.absoluteFill}>
+          <View className="bg-black/40" style={StyleSheet.absoluteFill} />
+        </Pressable>
+        <Animated.View
+          className="bg-system-background absolute inset-x-0 bottom-0 max-h-[70%] overflow-hidden rounded-t-2xl border-t-zinc-200 p-4 dark:border-t-zinc-800"
+          style={[{ paddingBottom: insets.bottom + 10 }, sheetAnimatedStyle]}
+        >
+          <View className="mb-4 flex-row items-center justify-between">
+            <TouchableOpacity
+              onPress={handleCopyAll}
+              className="rounded-full bg-zinc-100 p-2 active:opacity-80 dark:bg-zinc-800"
+            >
+              <CopyCuteReIcon width={18} height={18} color={textColor} />
+            </TouchableOpacity>
+            <Text className="text-label text-lg font-semibold">AI Summary</Text>
+            <TouchableOpacity
+              onPress={handleClose}
+              className="rounded-full bg-zinc-100 p-2 active:opacity-80 dark:bg-zinc-800"
+            >
+              <CloseCuteReIcon width={18} height={18} color={textColor} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <SelectableText className="text-label text-base leading-6">{text}</SelectableText>
+          </ScrollView>
+        </Animated.View>
+      </View>
     </Modal>
   )
 }