fix missing horizontal scroll on pivot tables (#46400)

* fix pivot table missing horizontal scroll

* spec

* Update Loki Snapshots

---------

Co-authored-by: Metabase Automation <github-automation@metabase.com>

e2e/test/scenarios/visualizations-tabular/pivot_tables.cy.spec.js

@@ -577,7 +577,7 @@ describe("scenarios > visualizations > pivot tables", { tags: "@slow" }, () => {
   });
 
   describe("dashboards", () => {
-    beforeEach(() => {
+    it("should be scrollable even when tiny (metabase#24678)", () => {
       cy.createQuestionAndDashboard({
         questionDetails: {
           name: QUESTION_NAME,
@@ -588,17 +588,34 @@ describe("scenarios > visualizations > pivot tables", { tags: "@slow" }, () => {
           name: DASHBOARD_NAME,
         },
         cardDetails: {
-          size_x: 16,
-          size_y: 8,
+          size_x: 3,
+          size_y: 3,
         },
       }).then(({ body: { dashboard_id } }) => visitDashboard(dashboard_id));
-    });
 
-    it("should display a pivot table on a dashboard (metabase#14465)", () => {
-      assertOnPivotFields();
+      dashboardCards()
+        .eq(0)
+        .within(() => {
+          cy.findByText("Doohickey").scrollIntoView().should("be.visible");
+        });
     });
 
-    it("should allow filtering drill through (metabase#14632)", () => {
+    it("should allow filtering drill through (metabase#14632) (metabase#14465)", () => {
+      cy.createQuestionAndDashboard({
+        questionDetails: {
+          name: QUESTION_NAME,
+          query: testQuery.query,
+          display: "pivot",
+        },
+        dashboardDetails: {
+          name: DASHBOARD_NAME,
+        },
+        cardDetails: {
+          size_x: 16,
+          size_y: 8,
+        },
+      }).then(({ body: { dashboard_id } }) => visitDashboard(dashboard_id));
+
       assertOnPivotFields();
       // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
       cy.findByText("Google").click(); // open drill-through menu

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx

@@ -154,6 +154,7 @@ interface PivotTableRootProps {
 
 export const PivotTableRoot = styled.div<PivotTableRootProps>`
   height: 100%;
+  overflow: auto;
   font-size: ${({ theme }) => theme.other.pivotTable.cell.fontSize};
 
   ${props =>

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx

@@ -60,6 +60,8 @@ import {
   getCellWidthsForSection,
 } from "./utils";
 
+const MIN_USABLE_BODY_WIDTH = 300;
+
 const mapStateToProps = (state: State) => ({
   fontFamily: getSetting(state, "application-font"),
 });
@@ -87,6 +89,7 @@ function _PivotTable({
   fontFamily,
   onVisualizationClick,
 }: PivotTableProps) {
+  const [viewPortWidth, setViewPortWidth] = useState(width);
   const [gridElement, setGridElement] = useState<HTMLElement | null>(null);
   const columnWidthSettings = settings["pivot_table.column_widths"];
 
@@ -280,6 +283,32 @@ function _PivotTable({
     updateHeaderWidths(newColumnWidths);
   };
 
+  const leftHeaderWidth =
+    pivoted?.rowIndexes.length > 0
+      ? LEFT_HEADER_LEFT_SPACING + (totalLeftHeaderWidths ?? 0)
+      : 0;
+
+  useEffect(() => {
+    const availableBodyWidth = width - leftHeaderWidth;
+    const fullBodyWidth = sumArray(
+      getCellWidthsForSection(valueHeaderWidths, pivoted?.valueIndexes, 0),
+    );
+
+    const minUsableBodyWidth = Math.min(MIN_USABLE_BODY_WIDTH, fullBodyWidth);
+    if (availableBodyWidth < minUsableBodyWidth) {
+      setViewPortWidth(leftHeaderWidth + minUsableBodyWidth);
+    } else {
+      setViewPortWidth(width);
+    }
+  }, [
+    totalLeftHeaderWidths,
+    valueHeaderWidths,
+    pivoted?.valueIndexes,
+    width,
+    leftHeaderWidths,
+    leftHeaderWidth,
+  ]);
+
   if (pivoted === null || !leftHeaderWidths || columnsChanged) {
     return null;
   }
@@ -301,11 +330,7 @@ function _PivotTable({
 
   const topHeaderHeight = topHeaderRows * CELL_HEIGHT;
   const bodyHeight = height - topHeaderHeight;
-
-  const leftHeaderWidth =
-    rowIndexes.length > 0
-      ? LEFT_HEADER_LEFT_SPACING + (totalLeftHeaderWidths ?? 0)
-      : 0;
+  const topHeaderWidth = viewPortWidth - leftHeaderWidth;
 
   function getCellClickHandler(clicked: PivotTableClicked) {
     if (!clicked) {
@@ -377,10 +402,11 @@ function _PivotTable({
               </PivotTableTopLeftCellsContainer>
               {/* top header */}
               <Collection
+                style={{ minWidth: `${topHeaderWidth}px` }}
                 ref={topHeaderRef}
                 className={CS.scrollHideAll}
                 isNightMode={isNightMode}
-                width={width - leftHeaderWidth}
+                width={topHeaderWidth}
                 height={topHeaderHeight}
                 cellCount={topHeaderItems.length}
                 cellRenderer={({ index, style, key }) => (
@@ -458,7 +484,7 @@ function _PivotTable({
                   {() => (
                     <Grid
                       aria-label={PIVOT_TABLE_BODY_LABEL}
-                      width={width - leftHeaderWidth}
+                      width={viewPortWidth - leftHeaderWidth}
                       height={bodyHeight}
                       className={CS.textDark}
                       rowCount={rowCount}

frontend/src/metabase/visualizations/visualizations/PivotTable/utils.ts

@@ -276,8 +276,8 @@ export const topHeaderCellSizeAndPositionGetter = (
 
 export const getWidthForRange = (
   widths: CustomColumnWidth,
-  start: number,
-  end: number,
+  start?: number,
+  end?: number,
 ) => {
   let total = 0;
   for (let i = start ?? 0; i < (end ?? Object.keys(widths).length); i++) {