fix list of values filter height (#19674)

frontend/src/metabase/query_builder/components/filters/pickers/DefaultPicker.jsx

@@ -19,6 +19,7 @@ import {
   BetweenLayoutContainer,
   BetweenLayoutFieldSeparator,
   BetweenLayoutFieldContainer,
+  DefaultPickerContainer,
 } from "./DefaultPicker.styled";
 
 const defaultPickerPropTypes = {
@@ -45,6 +46,7 @@ export default function DefaultPicker({
   className,
   minWidth,
   maxWidth,
+  isSidebar,
 }) {
   const operator = filter.operator();
   if (!operator) {
@@ -147,7 +149,12 @@ export default function DefaultPicker({
   }
 
   return (
-    <div className={cx(className, "PopoverBody--marginBottom")}>{layout}</div>
+    <DefaultPickerContainer
+      limitHeight={!isSidebar}
+      className={cx(className, "PopoverBody--marginBottom")}
+    >
+      {layout}
+    </DefaultPickerContainer>
   );
 }
 

frontend/src/metabase/query_builder/components/filters/pickers/DefaultPicker.styled.tsx

 import { color } from "metabase/lib/colors";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 export const BetweenLayoutContainer = styled.div`
   display: flex;
@@ -17,3 +17,17 @@ export const BetweenLayoutFieldSeparator = styled.div`
   font-weight: 700;
   color: ${color("text-medium")};
 `;
+
+interface DefaultPickerContainerProps {
+  limitHeight: boolean;
+}
+
+export const DefaultPickerContainer = styled.div<DefaultPickerContainerProps>`
+  ${props =>
+    props.limitHeight
+      ? css`
+          max-height: 300px;
+          overflow: auto;
+        `
+      : null}
+`;