Fix segment group list scrolling

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;
 }

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');
   }

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');
+  });
+});