From 188add4b0ecf55c6b5e5ee605d7131b38a05b33a Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Fri, 4 Sep 2026 11:54:10 -0400
Subject: [PATCH] fix(segmentation): let the segment group list scroll

---
 src/components/SegmentGroupControls.vue      |  3 +-
 tests/pageobjects/volview.page.ts            |  4 +++
 tests/specs/segment-group-list-scroll.e2e.ts | 29 ++++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 tests/specs/segment-group-list-scroll.e2e.ts

diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index fc9606b12..68b6cf723 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -402,7 +402,8 @@ function deleteSelected() {
 </template>
 
 <style>
-.segment-group-list {
+/* Override Vuetify's hidden overflow for lists inside navigation drawers. */
+.v-navigation-drawer .v-list.segment-group-list {
   max-height: 240px;
   overflow-y: auto;
 }
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index 98af0144d..699fdf60d 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -242,6 +242,10 @@ class VolViewPage extends Page {
     return $$('button[data-testid="segment-group-save-button"]');
   }
 
+  get segmentGroupList() {
+    return $('.segment-group-list');
+  }
+
   get saveSegmentGroupFilenameInput() {
     return this.activeDialog.$('#filename');
   }
diff --git a/tests/specs/segment-group-list-scroll.e2e.ts b/tests/specs/segment-group-list-scroll.e2e.ts
new file mode 100644
index 000000000..f642e93b8
--- /dev/null
+++ b/tests/specs/segment-group-list-scroll.e2e.ts
@@ -0,0 +1,29 @@
+import { volViewPage } from '../pageobjects/volview.page';
+import { openUrls } from './utils';
+import { PROSTATEX_DATASET } from './configTestUtils';
+
+// Six 48px rows overflow the list's 240px cap.
+const GROUP_COUNT = 6;
+
+describe('Segment group list', () => {
+  it('lets overflowing segment groups scroll', async () => {
+    await openUrls([PROSTATEX_DATASET]);
+
+    for (let i = 0; i < GROUP_COUNT; i++) {
+      await volViewPage.createSegmentGroup(`Group ${i + 1}`);
+    }
+
+    const list = await volViewPage.segmentGroupList;
+    await list.waitForDisplayed();
+
+    const rows = await list.$$('.v-list-item');
+    expect(rows.length).toEqual(GROUP_COUNT);
+
+    const scrollHeight = Number(await list.getProperty('scrollHeight'));
+    const clientHeight = Number(await list.getProperty('clientHeight'));
+    expect(scrollHeight).toBeGreaterThan(clientHeight);
+
+    const overflowY = await list.getCSSProperty('overflow-y');
+    expect(overflowY.value).toEqual('auto');
+  });
+});