PivotTable scroll alignment fix (#14522)

* initial version of row alignment fix

* Update frontend/src/metabase/visualizations/visualizations/PivotTable.jsx

* Update frontend/src/metabase/visualizations/visualizations/PivotTable.jsx

Co-authored-by: Paul Rosenzweig <paulrosenzweig@users.noreply.github.com>

* prettier

* use scroll bar size more directly

Co-authored-by: Paul Rosenzweig <paulrosenzweig@users.noreply.github.com>

frontend/src/metabase/lib/dom.js

+import _ from "underscore";
 // IE doesn't support scrollX/scrollY:
 export const getScrollX = () =>
   typeof window.scrollX === "undefined" ? window.pageXOffset : window.scrollX;
@@ -26,6 +27,25 @@ export const IFRAMED_IN_SELF = (function() {
   }
 })();
 
+// check whether scrollbars are visible to the user,
+// this is off by default on Macs, but can be changed
+// Always on on most other non mobile platforms
+export const getScrollBarSize = _.memoize(() => {
+  const scrollableElem = document.createElement("div"),
+    innerElem = document.createElement("div");
+  scrollableElem.style.width = "30px";
+  scrollableElem.style.height = "30px";
+  scrollableElem.style.overflow = "scroll";
+  scrollableElem.style.borderWidth = "0";
+  innerElem.style.width = "30px";
+  innerElem.style.height = "60px";
+  scrollableElem.appendChild(innerElem);
+  document.body.appendChild(scrollableElem); // Elements only have width if they're in the layout
+  const diff = scrollableElem.offsetWidth - scrollableElem.clientWidth;
+  document.body.removeChild(scrollableElem);
+  return diff;
+});
+
 // check if we have access to localStorage to avoid handling "access denied"
 // exceptions
 export const HAS_LOCAL_STORAGE = (function() {

frontend/src/metabase/visualizations/visualizations/PivotTable.jsx

@@ -5,6 +5,8 @@ import _ from "underscore";
 import { getIn, updateIn } from "icepick";
 import { Grid, Collection, ScrollSync } from "react-virtualized";
 
+import { getScrollBarSize } from "metabase/lib/dom";
+
 import Ellipsified from "metabase/components/Ellipsified";
 import Icon from "metabase/components/Icon";
 import { isDimension } from "metabase/lib/schema_metadata";
@@ -18,6 +20,7 @@ import { formatColumn } from "metabase/lib/formatting";
 import { columnSettings } from "metabase/visualizations/lib/settings/column";
 
 import type { VisualizationProps } from "metabase-types/types/Visualization";
+import { findDOMNode } from "react-dom";
 
 const partitions = [
   {
@@ -178,6 +181,10 @@ export default class PivotTable extends Component {
     },
   };
 
+  setBodyRef = element => {
+    this.bodyRef = element;
+  };
+
   getColumnTitle(columnIndex) {
     const { data, settings } = this.props;
     const columns = data.cols.filter(col => !isPivotGroupColumn(col));
@@ -199,6 +206,25 @@ export default class PivotTable extends Component {
       return null;
     }
 
+    const grid = this.bodyRef && findDOMNode(this.bodyRef);
+
+    // In cases where there are horizontal scrollbars are visible AND the data grid has to scroll vertically as well,
+    // the left sidebar and the main grid can get out of ScrollSync due to slightly differing heights
+    function scrollBarOffsetSize() {
+      if (!grid) {
+        return 0;
+      }
+      // get the size of the scrollbars
+      const scrollBarSize = getScrollBarSize();
+      const scrollsHorizontally = grid.scrollWidth > parseInt(grid.style.width);
+
+      if (scrollsHorizontally && scrollBarSize > 0) {
+        return scrollBarSize;
+      } else {
+        return 0;
+      }
+    }
+
     let pivoted;
     try {
       pivoted = multiLevelPivot(data, settings);
@@ -390,7 +416,7 @@ export default class PivotTable extends Component {
                     leftHeaderCellSizeAndPositionGetter
                   }
                   width={leftHeaderWidth}
-                  height={height - topHeaderHeight}
+                  height={height - topHeaderHeight - scrollBarOffsetSize()}
                   scrollTop={scrollTop}
                   onScroll={({ scrollTop }) => onScroll({ scrollTop })}
                 />
@@ -407,6 +433,7 @@ export default class PivotTable extends Component {
                   onScroll={({ scrollLeft, scrollTop }) =>
                     onScroll({ scrollLeft, scrollTop })
                   }
+                  ref={this.setBodyRef}
                   scrollTop={scrollTop}
                   scrollLeft={scrollLeft}
                 />