From eb2e271a08018aaea973b5ff405bc5b2f8072632 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 22 Jun 2026 21:22:41 -0700
Subject: [PATCH] Constrain filter edit tabs to scroll within the modal

---
 src/components/input/FilterEditForm.tsx | 94 +++++++++++++++----------
 1 file changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/components/input/FilterEditForm.tsx b/src/components/input/FilterEditForm.tsx
index 247a698ca..02258b5be 100644
--- a/src/components/input/FilterEditForm.tsx
+++ b/src/components/input/FilterEditForm.tsx
@@ -75,46 +75,62 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
     setCurrentCohort(type === 'cohort' ? id : undefined);
   };
 
+  const panelStyle = { overflowY: 'auto' as const, minHeight: 0 };
+
   return (
-    <Column width={isMobile ? 'auto' : '800px'} gap="6">
-      <Column minHeight="500px">
-        <Tabs>
-          <TabList>
-            <Tab id="fields">{t(labels.fields)}</Tab>
-            {!isPixelLink && (
-              <>
-                <Tab id="segments">{t(labels.segments)}</Tab>
-                <Tab id="cohorts">{t(labels.cohorts)}</Tab>
-              </>
-            )}
-          </TabList>
-          <TabPanel id="fields">
-            <FieldFilters
-              websiteId={websiteId}
-              value={currentFilters}
-              match={currentMatch}
-              onChange={setCurrentFilters}
-              onMatchChange={setCurrentMatch}
-              exclude={excludedFields}
-            />
-          </TabPanel>
-          <TabPanel id="segments">
-            <SegmentFilters
-              websiteId={websiteId}
-              segmentId={currentSegment}
-              onChange={handleSegmentChange}
-            />
-          </TabPanel>
-          <TabPanel id="cohorts">
-            <SegmentFilters
-              type="cohort"
-              websiteId={websiteId}
-              segmentId={currentCohort}
-              onChange={handleSegmentChange}
-            />
-          </TabPanel>
-        </Tabs>
-      </Column>
+    <Column
+      width={isMobile ? 'auto' : '800px'}
+      gap="6"
+      minHeight="500px"
+      style={{
+        maxHeight: isMobile
+          ? 'calc(100dvh - 64px)'
+          : 'calc(min(80dvh, 100dvh - 40px) - 64px)',
+      }}
+    >
+      <Tabs
+        style={{
+          flex: 1,
+          minHeight: 0,
+          gridTemplateRows: 'auto 1fr',
+          overflow: 'hidden',
+        }}
+      >
+        <TabList>
+          <Tab id="fields">{t(labels.fields)}</Tab>
+          {!isPixelLink && (
+            <>
+              <Tab id="segments">{t(labels.segments)}</Tab>
+              <Tab id="cohorts">{t(labels.cohorts)}</Tab>
+            </>
+          )}
+        </TabList>
+        <TabPanel id="fields" style={panelStyle}>
+          <FieldFilters
+            websiteId={websiteId}
+            value={currentFilters}
+            match={currentMatch}
+            onChange={setCurrentFilters}
+            onMatchChange={setCurrentMatch}
+            exclude={excludedFields}
+          />
+        </TabPanel>
+        <TabPanel id="segments" style={panelStyle}>
+          <SegmentFilters
+            websiteId={websiteId}
+            segmentId={currentSegment}
+            onChange={handleSegmentChange}
+          />
+        </TabPanel>
+        <TabPanel id="cohorts" style={panelStyle}>
+          <SegmentFilters
+            type="cohort"
+            websiteId={websiteId}
+            segmentId={currentCohort}
+            onChange={handleSegmentChange}
+          />
+        </TabPanel>
+      </Tabs>
       <Row
         alignItems="center"
         justifyContent="space-between"