feat: scrollable styles pochette

src/screens/cover/PouchReady.js

@@ -5,9 +5,11 @@ import {
   ActivityIndicator,
   Image,
   Pressable,
+  ScrollView,
   StyleSheet,
   Text,
   TextInput,
+  useWindowDimensions,
   View,
   KeyboardAvoidingView,
   Platform,
@@ -86,6 +88,10 @@ const PouchReady = () => {
   const [coverProgress, setCoverProgress] = useState(0)
   const coverProgressIntervalRef = useRef(null)
   const coverProgressStartRef = useRef(null)
+  const { height: windowHeight } = useWindowDimensions()
+  const dropdownMaxHeight = !isWeb
+    ? Math.max(220, Math.min(340, Math.round(windowHeight * 0.45)))
+    : null
 
   const showGenerationLoading = useCallback(async () => {
     setIsAwaitingGenerationStart(true)
@@ -497,7 +503,19 @@ const PouchReady = () => {
                           />
                         </Pressable>
                         {isPresetDropdownOpen && (
-                          <View style={styles.dropdownList}>
+                          <View
+                            style={[
+                              styles.dropdownList,
+                              !isWeb && dropdownMaxHeight ? { maxHeight: dropdownMaxHeight } : null,
+                            ]}
+                          >
+                            <ScrollView
+                              bounces={false}
+                              showsVerticalScrollIndicator={false}
+                              nestedScrollEnabled
+                              keyboardShouldPersistTaps="handled"
+                              contentContainerStyle={styles.dropdownListContent}
+                            >
                               {COVER_STYLE_PRESETS.map((styleOption, index) => {
                                 const isActive = selectedPresetStyle === styleOption
                                 const isLast = index === COVER_STYLE_PRESETS.length - 1
@@ -532,6 +550,7 @@ const PouchReady = () => {
                                   </Pressable>
                                 )
                               })}
+                            </ScrollView>
                           </View>
                         )}
                       </View>
@@ -798,6 +817,9 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(12,10,18,0.95)',
     overflow: 'hidden',
   },
+  dropdownListContent: {
+    paddingVertical: 2,
+  },
   dropdownOption: {
     flexDirection: 'row',
     alignItems: 'center',