Fix selector scroll jankyness (#12756)

frontend/src/metabase/components/AccordionList.jsx

@@ -382,7 +382,7 @@ export default class AccordionList extends Component {
     const defaultListStyle = {
       // HACK - Ensure the component can scroll
       // This is a temporary fix to handle cases where the parent component doesn’t pass in the correct `maxHeight`
-      overflowY: "scroll",
+      overflowY: "auto",
     };
 
     return (

frontend/src/metabase/query_builder/components/DataSelector.jsx

@@ -859,12 +859,14 @@ const TablePicker = ({
       },
     ];
     return (
-      <div>
+      <div style={{ width: 300, overflowY: "auto" }}>
         <AccordionList
           id="TablePicker"
           key="tablePicker"
           className="text-brand"
           sections={sections}
+          maxHeight={Infinity}
+          width={"100%"}
           searchable
           onChange={item => onChangeTable(item.table)}
           itemIsSelected={item =>
@@ -951,12 +953,14 @@ class FieldPicker extends Component {
     ];
 
     return (
-      <div style={{ width: 300 }}>
+      <div style={{ width: 300, overflowY: "auto" }}>
         <AccordionList
           id="FieldPicker"
           key="fieldPicker"
           className="text-brand"
           sections={sections}
+          maxHeight={Infinity}
+          width={"100%"}
           searchable
           onChange={item => onChangeField(item.field)}
           itemIsSelected={item =>

frontend/src/metabase/query_builder/components/DimensionList.jsx

@@ -22,7 +22,7 @@ export type AccordionListSection = {
 type Props = {
   className?: string,
   maxHeight?: number,
-  width?: ?number,
+  width?: ?number | ?string,
 
   dimension?: ?Dimension,
   dimensions?: Dimension[],

frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx

@@ -154,7 +154,10 @@ export default class ViewFilterPopover extends Component {
     const dimension = filter && filter.dimension();
     if (choosingField || !dimension) {
       return (
-        <div className={className} style={{ minWidth: MIN_WIDTH, ...style }}>
+        <div
+          className={className}
+          style={{ minWidth: MIN_WIDTH, overflowY: "auto", ...style }}
+        >
           {fieldPickerTitle && (
             <SidebarHeader className="mx1 my2" title={fieldPickerTitle} />
           )}
@@ -177,7 +180,7 @@ export default class ViewFilterPopover extends Component {
               // special case for segments
               this.handleCommitFilter(item.filter, item.query);
             }}
-            width={isSidebar ? null : MIN_WIDTH}
+            width={isSidebar ? null : "100%"}
             alwaysExpanded={isTopLevel || isSidebar}
           />
           {showCustom && (