fix(app): keep settings sidebar scrollable

packages/app/e2e/settings-sidebar-scroll.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from "./fixtures";
+import { gotoAppShell, openSettings } from "./helpers/app";
+
+test.describe("Settings sidebar scrolling", () => {
+  test.use({ viewport: { width: 900, height: 260 } });
+
+  test("desktop drag region does not cover the scroll body", async ({ page }) => {
+    await page.addInitScript(() => {
+      window.paseoDesktop = {
+        platform: "darwin",
+        events: { on: () => () => {} },
+        invoke: async (command: string) => {
+          if (command === "get_desktop_settings") {
+            return {
+              releaseChannel: "stable",
+              daemon: { manageBuiltInDaemon: true, keepRunningAfterQuit: true },
+            };
+          }
+          return null;
+        },
+      };
+    });
+
+    await gotoAppShell(page);
+    await openSettings(page);
+
+    const sidebar = page.getByTestId("settings-sidebar");
+    await expect(sidebar).toBeVisible();
+
+    const geometry = await sidebar.evaluate((node) => {
+      let scroller: HTMLElement | null = null;
+      for (const element of node.querySelectorAll<HTMLElement>("*")) {
+        if (element.scrollHeight > element.clientHeight) {
+          scroller = element;
+          break;
+        }
+      }
+      if (!scroller) return null;
+
+      const scrollerRect = scroller.getBoundingClientRect();
+      const dragRegions = [];
+      for (const element of node.querySelectorAll<HTMLElement>("*")) {
+        if (getComputedStyle(element).getPropertyValue("-webkit-app-region") === "drag") {
+          const rect = element.getBoundingClientRect();
+          dragRegions.push({ bottom: rect.bottom });
+        }
+      }
+
+      return {
+        scrollBodyTop: scrollerRect.top,
+        dragRegions,
+      };
+    });
+
+    expect(geometry).not.toBeNull();
+    expect(geometry!.dragRegions).not.toEqual([]);
+    for (const dragRegion of geometry!.dragRegions) {
+      expect(dragRegion.bottom).toBeLessThanOrEqual(geometry!.scrollBodyTop + 1);
+    }
+  });
+});

packages/app/src/screens/settings-screen.tsx

@@ -996,11 +996,12 @@ function SettingsSidebar({
   const insets = useSafeAreaInsets();
   const padding = useWindowControlsPadding("sidebar");
   const isDesktop = layout === "desktop";
-  const containerStyle = useMemo(
+  const outerContainerStyle = useMemo(
-    () => [
+    () => [isDesktop ? sidebarStyles.desktopContainer : sidebarStyles.mobileContainer],
-      isDesktop ? sidebarStyles.desktopContainer : sidebarStyles.mobileContainer,
+    [isDesktop],
-      isDesktop ? { paddingTop: insets.top } : null,
+  );
-    ],
+  const innerContainerStyle = useMemo(
+    () => [{ flex: 1 }, isDesktop ? { paddingTop: insets.top } : null],
     [insets.top, isDesktop],
   );
   const selectedSectionId = view.kind === "section" ? view.section : null;
@@ -1008,22 +1009,8 @@ function SettingsSidebar({
   const isProjectsSelected = view.kind === "projects" || view.kind === "project";
   const paddingTopStyle = useMemo(() => ({ height: padding.top }), [padding.top]);
 
-  return (
+  const sidebarBody = (
-    <View style={containerStyle} testID="settings-sidebar">
+    <>
-      {isDesktop ? (
-        <>
-          <TitlebarDragRegion />
-          {padding.top > 0 ? <View style={paddingTopStyle} /> : null}
-        </>
-      ) : null}
-      {isDesktop ? (
-        <SidebarHeaderRow
-          icon={ArrowLeft}
-          label="Back"
-          onPress={onBackToWorkspace}
-          testID="settings-back-to-workspace"
-        />
-      ) : null}
       <View style={sidebarStyles.list}>
         <Text style={sidebarStyles.groupLabel}>App</Text>
         {items.map((item) => (
@@ -1079,6 +1066,30 @@ function SettingsSidebar({
           </Pressable>
         </View>
       )}
+    </>
+  );
+
+  return (
+    <View style={outerContainerStyle} testID="settings-sidebar">
+      {isDesktop ? (
+        <View style={innerContainerStyle}>
+          <View style={sidebarStyles.sidebarDragArea}>
+            <TitlebarDragRegion />
+            {padding.top > 0 ? <View style={paddingTopStyle} /> : null}
+            <SidebarHeaderRow
+              icon={ArrowLeft}
+              label="Back"
+              onPress={onBackToWorkspace}
+              testID="settings-back-to-workspace"
+            />
+          </View>
+          <ScrollView style={sidebarStyles.scrollBody} showsVerticalScrollIndicator={false}>
+            {sidebarBody}
+          </ScrollView>
+        </View>
+      ) : (
+        sidebarBody
+      )}
     </View>
   );
 }
@@ -1630,6 +1641,12 @@ const sidebarStyles = StyleSheet.create((theme) => ({
     borderRightColor: theme.colors.border,
     backgroundColor: theme.colors.surfaceSidebar,
   },
+  scrollBody: {
+    flex: 1,
+  },
+  sidebarDragArea: {
+    position: "relative",
+  },
   mobileContainer: {
     paddingVertical: theme.spacing[2],
     paddingHorizontal: theme.spacing[2],