Fix overflow problem in Filter Modal sidebar (#42386) (#42394)

Co-authored-by: Uladzimir Havenchyk <125459446+uladzimirdev@users.noreply.github.com>

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

@@ -41,3 +41,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

@@ -11,6 +11,7 @@ import {
   ModalFooter,
   ModalHeader,
   TabPanelRoot,
+  TabsListSidebar,
 } from "./FilterModal.styled";
 import { FilterSearchInput } from "./FilterSearchInput";
 import { SegmentFilterEditor } from "./SegmentFilterEditor";
@@ -190,7 +191,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}
@@ -201,7 +202,7 @@ function TabList({ groupItems }: TabListProps) {
           {groupItem.displayName}
         </Tabs.Tab>
       ))}
-    </Tabs.List>
+    </TabsListSidebar>
   );
 }