Fix overflow problem in Filter Modal sidebar (#42386)

frontend/src/metabase/querying/components/FilterModal/FilterModal.styled.tsx

@@ -43,3 +43,8 @@ export const ModalBody = styled(Modal.Body)`
 export const ModalFooter = styled(Flex)`
   border-top: 1px solid ${color("border")};
 `;
+
+export const TabsListSidebar = styled(Tabs.List)`
+  overflow-y: auto;
+  flex-wrap: nowrap;
+`;

frontend/src/metabase/querying/components/FilterModal/FilterModal.tsx

@@ -20,6 +20,7 @@ import {
   ModalFooter,
   ModalHeader,
   TabPanelRoot,
+  TabsListSidebar,
 } from "./FilterModal.styled";
 import { FilterSearchInput } from "./FilterSearchInput";
 import { SegmentFilterEditor } from "./SegmentFilterEditor";
@@ -198,7 +199,7 @@ interface TabListProps {
 
 function TabList({ groupItems }: TabListProps) {
   return (
-    <Tabs.List w="25%" pt="sm" pl="md">
+    <TabsListSidebar w="25%" pt="sm" pl="md">
       {groupItems.map(groupItem => (
         <Tabs.Tab
           key={groupItem.key}
@@ -209,7 +210,7 @@ function TabList({ groupItems }: TabListProps) {
           {groupItem.displayName}
         </Tabs.Tab>
       ))}
-    </Tabs.List>
+    </TabsListSidebar>
   );
 }