Avoid filter popover overflow (#49211) (#49272)

* Add max-height to the click actions popover to prevent overflow and infinite scroll

* Add reproduction for #48851

* Update reproduction to speed it up

* Use existing helper for table header click

* Add max height to string filter picker

* Revert "Add max-height to the click actions popover to prevent overflow and infinite scroll"

This reverts commit 166478d8.

Co-authored-by: Romeo Van Snick <romeo@romeovansnick.be>

e2e/test/scenarios/filters-reproductions/filters-reproductions.cy.spec.js

@@ -1468,3 +1468,34 @@ describe("issue 47887", () => {
     });
   });
 });
+
+describe("Issue 48851", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsNormalUser();
+    cy.viewport(1050, 300);
+  });
+
+  const manyValues = Array(12)
+    .fill(0)
+    .map(() => Math.round(Math.random() * 1000_000_000_000).toString(36))
+    .join(", ");
+
+  it("should not overflow the filter popover, even when there are a lot of values (metabase#48851)", () => {
+    openProductsTable();
+    tableHeaderClick("Title");
+
+    popover().within(() => {
+      cy.findByText("Filter by this column").click();
+      cy.findByText("Is").click();
+    });
+
+    popover().last().findByText("Contains").click();
+    popover()
+      .first()
+      .findByPlaceholderText("Enter some text")
+      .type(manyValues, { timeout: 0 });
+
+    popover().button("Add filter").should("be.visible");
+  });
+});

frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx

@@ -137,7 +137,7 @@ function StringValueInput({
 
   if (type === "partial") {
     return (
-      <Flex p="md">
+      <Box p="md" pb={0} mah="40vh" style={{ overflow: "auto" }}>
         <MultiAutocomplete
           value={values}
           data={[]}
@@ -147,7 +147,8 @@ function StringValueInput({
           aria-label={t`Filter value`}
           onChange={onChange}
         />
-      </Flex>
+        <Box pt="md" />
+      </Box>
     );
   }