Fix breakout pivot tether (#43060)

* Limit the height of the breakout popover

* Allow the click action popover to untether to prevent overflowing the screen

* Add reproduction for #43075

* Rename breaktrhough to breakout

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Use findAllByTestId

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Remove copy pasted question name

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Remove unused api intercept

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

---------

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

e2e/test/scenarios/visualizations-charts/reproductions/43075-dropdown-overflows.cy.spec.ts

@@ -0,0 +1,40 @@
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+import {
+  createQuestion,
+  popover,
+  restore,
+  type StructuredQuestionDetails,
+} from "e2e/support/helpers";
+
+const { PRODUCTS, PRODUCTS_ID } = SAMPLE_DATABASE;
+
+const questionDetails: StructuredQuestionDetails = {
+  query: {
+    "source-table": PRODUCTS_ID,
+    aggregation: [["count"]],
+    breakout: [["field", PRODUCTS.CATEGORY, null]],
+  },
+};
+
+describe("issue 43075", () => {
+  beforeEach(() => {
+    cy.viewport(1000, 300);
+
+    restore();
+    cy.signInAsAdmin();
+
+    createQuestion(questionDetails, { visitQuestion: true });
+  });
+
+  it("the breakout popover should fit within the window (metabase#43075)", () => {
+    cy.findAllByTestId("cell-data").contains("54").click();
+    popover().findByText("Break out by…").click();
+    popover().findByText("Category").click();
+
+    cy.window().then(win => {
+      expect(win.document.documentElement.scrollHeight).to.be.lte(
+        win.document.documentElement.offsetHeight,
+      );
+    });
+  });
+});

frontend/src/metabase/querying/utils/drills/pivot-drill/pivot-drill.tsx

@@ -1,6 +1,7 @@
 import { t } from "ttag";
 
 import { QueryColumnPicker } from "metabase/common/components/QueryColumnPicker";
+import { Box } from "metabase/ui";
 import { ClickActionsView } from "metabase/visualizations/components/ClickActions";
 import type {
   ClickActionPopoverProps,
@@ -86,18 +87,20 @@ function getColumnPopover(
     onClose,
   }: ClickActionPopoverProps) {
     return (
-      <QueryColumnPicker
-        query={query}
-        stageIndex={stageIndex}
-        columnGroups={Lib.groupColumns(columns)}
-        checkIsColumnSelected={() => false}
-        onSelect={column => {
-          const nextQuestion = applyDrill(drill, column).setDefaultDisplay();
-          const nextCard = nextQuestion.card();
-          onChangeCardAndRun({ nextCard });
-        }}
-        onClose={onClose}
-      />
+      <Box mah="65vh">
+        <QueryColumnPicker
+          query={query}
+          stageIndex={stageIndex}
+          columnGroups={Lib.groupColumns(columns)}
+          checkIsColumnSelected={() => false}
+          onSelect={column => {
+            const nextQuestion = applyDrill(drill, column).setDefaultDisplay();
+            const nextCard = nextQuestion.card();
+            onChangeCardAndRun({ nextCard });
+          }}
+          onClose={onClose}
+        />
+      </Box>
     );
   };
 }

frontend/src/metabase/visualizations/components/ClickActions/ClickActionsPopover.tsx

@@ -169,6 +169,8 @@ export class ClickActionsPopover extends Component<
               name: "preventOverflow",
               options: {
                 padding: 16,
+                altAxis: true,
+                tether: false,
               },
             },
           ],