diff --git a/frontend/src/metabase/components/AccordionList.jsx b/frontend/src/metabase/components/AccordionList.jsx
index 865b353872d53d79014993229e1c1f9a10744c28..e375f401b097f4571e2385e7b7723b3cde0fe869 100644
--- a/frontend/src/metabase/components/AccordionList.jsx
+++ b/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 (
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index 04a7cb0656d1f403bbc74510fe6b4a41105ee3cb..7e9a61409e6709eb0a7f2d8f8b369c33fb8056b6 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/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 =>
diff --git a/frontend/src/metabase/query_builder/components/DimensionList.jsx b/frontend/src/metabase/query_builder/components/DimensionList.jsx
index fdea030a42432e3566878763c59b4b5425d7cead..104e3211cc3ff93c954c381b49005773787a0bbc 100644
--- a/frontend/src/metabase/query_builder/components/DimensionList.jsx
+++ b/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[],
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx b/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
index 6eaf4da846ab8897bf5f8af5130f6d4b06bb213f..e32825e8494dd08f2f26fbc6f962fba60982a2da 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
+++ b/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 && (