fix: reliable scroll-to-bottom, keyboard-aware project picker

Matthias Nott

2026-03-07 7d69229cd76447b92ee66f472f760994d00817ae

 components/SessionDrawer.tsx
..
..
@@ -9,9 +9,7 @@
9
9
   Animated,
10
10
   Dimensions,
11
11
   Keyboard,
12
-  KeyboardAvoidingView,
13
12
   LayoutAnimation,
14
-  Platform,
15
13
   Pressable,
16
14
   ScrollView,
17
15
   StyleSheet,
..
..
@@ -276,6 +274,18 @@
276
274
   const slideAnim = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
277
275
   const fadeAnim = useRef(new Animated.Value(0)).current;
278
276
   const [rendered, setRendered] = useState(false);
277
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
278
+  const pickerScrollRef = useRef<ScrollView>(null);
279
+
280
+  useEffect(() => {
281
+    const showSub = Keyboard.addListener("keyboardWillShow", (e) => {
282
+      setKeyboardHeight(e.endCoordinates.height);
283
+    });
284
+    const hideSub = Keyboard.addListener("keyboardWillHide", () => {
285
+      setKeyboardHeight(0);
286
+    });
287
+    return () => { showSub.remove(); hideSub.remove(); };
288
+  }, []);
279
289
 
280
290
   // Local ordering: merge server sessions while preserving user's drag order
281
291
   const [orderedSessions, setOrderedSessions] = useState<WsSession[]>([]);
..
..
@@ -473,11 +483,7 @@
473
483
             elevation: 20,
474
484
           }}
475
485
         >
476
-          <KeyboardAvoidingView
477
-            style={{ flex: 1 }}
478
-            behavior={Platform.OS === "ios" ? "padding" : undefined}
479
-          >
480
-          <GestureHandlerRootView style={{ flex: 1 }}>
486
+          <GestureHandlerRootView style={{ flex: 1, paddingBottom: keyboardHeight }}>
481
487
             {/* Header */}
482
488
             <View
483
489
               style={{
..
..
@@ -564,6 +570,7 @@
564
570
 
565
571
               {showProjectPicker && (
566
572
                 <ScrollView
573
+                  ref={pickerScrollRef}
567
574
                   style={{
568
575
                     marginHorizontal: 12,
569
576
                     borderRadius: 12,
..
..
@@ -630,6 +637,9 @@
630
637
                       autoCapitalize="none"
631
638
                       autoCorrect={false}
632
639
                       returnKeyType="go"
640
+                      onFocus={() => {
641
+                        setTimeout(() => pickerScrollRef.current?.scrollToEnd({ animated: true }), 100);
642
+                      }}
633
643
                       onSubmitEditing={() => {
634
644
                         if (customPath.trim()) launchSession({ path: customPath.trim() });
635
645
                       }}
..
..
@@ -679,7 +689,6 @@
679
689
               </Text>
680
690
             </View>
681
691
           </GestureHandlerRootView>
682
-          </KeyboardAvoidingView>
683
692
         </Animated.View>
684
693
       </View>
685
694
     </View>