fix list selection and other tickets

src/screens/Writing/CustomizeSongStructure.js

@@ -1,5 +1,6 @@
 import { View, StyleSheet, Image, Platform, Text } from "react-native";
 import React, { useMemo, useState, useCallback, useEffect } from "react";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { BlurView } from "expo-blur";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { Palette, Style } from "../../styles";
@@ -11,6 +12,7 @@ import { icons } from "../../assets";
 // onChange: callback that receives array like ['couplet','refrain',...]
 const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
   const [containerLayout, setContainerLayout] = useState(null);
+  const scrollRef = useAnimatedRef();
 
   // Build stable keyed data like { 'couplet-1': { label, value }, ... }
   const data = useMemo(() => {
@@ -78,17 +80,25 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
         subTitle="Réorganise par glisser-déposer"
       />
       <View style={{ flex: 1 }} onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}>
-        <Sortable.Grid
-          columns={1}
-          rowGap={12}
-          data={items}
-          renderItem={({ item }) => <Row item={item} />}
-          customHandle
-          onDragEnd={({ data: newData }) => {
-            const values = (newData || []).map((it) => it?.value).filter(Boolean);
-            onChange?.(values);
-          }}
-        />
+        <Animated.ScrollView
+          ref={scrollRef}
+          contentContainerStyle={{ paddingVertical: 4, paddingBottom: 24 }}
+          showsVerticalScrollIndicator={false}
+        >
+          <Sortable.Grid
+            columns={1}
+            rowGap={12}
+            data={items}
+            renderItem={({ item }) => <Row item={item} />}
+            customHandle
+            // Enable auto-scroll when dragging near edges
+            scrollableRef={scrollRef}
+            onDragEnd={({ data: newData }) => {
+              const values = (newData || []).map((it) => it?.value).filter(Boolean);
+              onChange?.(values);
+            }}
+          />
+        </Animated.ScrollView>
       </View>
     </View>
   );