fix: Make the scrollbar appear inside the table (#1310)

* Scroll container

* Add X scroll

* Remove widht min-content

plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -44,10 +44,15 @@ const Styles = styled.div<PivotTableStylesProps>`
       margin: ${margin}px;
       height: ${height - margin * 2}px;
       width: ${width - margin * 2}px;
-      overflow-y: scroll;
  `}
 `;
 
+const PivotTableWrapper = styled.div`
+  height: 100%;
+  max-width: fit-content;
+  overflow: auto;
+`;
+
 const METRIC_KEY = 'metric';
 const iconStyle = { stroke: 'black', strokeWidth: '16px' };
 
@@ -254,42 +259,44 @@ export default function PivotTableChart(props: PivotTableProps) {
 
   return (
     <Styles height={height} width={width} margin={theme.gridUnit * 4}>
-      <PivotTable
-        data={unpivotedData}
-        rows={rows}
-        cols={cols}
-        aggregatorsFactory={aggregatorsFactory}
-        defaultFormatter={defaultFormatter}
-        customFormatters={
-          hasCustomMetricFormatters ? { [METRIC_KEY]: metricFormatters } : undefined
-        }
-        aggregatorName={aggregateFunction}
-        vals={['value']}
-        rendererName="Table With Subtotal"
-        colOrder={colOrder}
-        rowOrder={rowOrder}
-        sorters={{
-          metric: sortAs(metricNames),
-        }}
-        tableOptions={{
-          clickRowHeaderCallback: toggleFilter,
-          clickColumnHeaderCallback: toggleFilter,
-          colTotals,
-          rowTotals,
-          highlightHeaderCellsOnHover: emitFilter,
-          highlightedHeaderCells: selectedFilters,
-          omittedHighlightHeaderGroups: [METRIC_KEY],
-          cellColorFormatters: { [METRIC_KEY]: metricColorFormatters },
-          dateFormatters,
-        }}
-        subtotalOptions={{
-          colSubtotalDisplay: { displayOnTop: colSubtotalPosition },
-          rowSubtotalDisplay: { displayOnTop: rowSubtotalPosition },
-          arrowCollapsed: <PlusSquareOutlined style={iconStyle} />,
-          arrowExpanded: <MinusSquareOutlined style={iconStyle} />,
-        }}
-        namesMapping={verboseMap}
-      />
+      <PivotTableWrapper>
+        <PivotTable
+          data={unpivotedData}
+          rows={rows}
+          cols={cols}
+          aggregatorsFactory={aggregatorsFactory}
+          defaultFormatter={defaultFormatter}
+          customFormatters={
+            hasCustomMetricFormatters ? { [METRIC_KEY]: metricFormatters } : undefined
+          }
+          aggregatorName={aggregateFunction}
+          vals={['value']}
+          rendererName="Table With Subtotal"
+          colOrder={colOrder}
+          rowOrder={rowOrder}
+          sorters={{
+            metric: sortAs(metricNames),
+          }}
+          tableOptions={{
+            clickRowHeaderCallback: toggleFilter,
+            clickColumnHeaderCallback: toggleFilter,
+            colTotals,
+            rowTotals,
+            highlightHeaderCellsOnHover: emitFilter,
+            highlightedHeaderCells: selectedFilters,
+            omittedHighlightHeaderGroups: [METRIC_KEY],
+            cellColorFormatters: { [METRIC_KEY]: metricColorFormatters },
+            dateFormatters,
+          }}
+          subtotalOptions={{
+            colSubtotalDisplay: { displayOnTop: colSubtotalPosition },
+            rowSubtotalDisplay: { displayOnTop: rowSubtotalPosition },
+            arrowCollapsed: <PlusSquareOutlined style={iconStyle} />,
+            arrowExpanded: <MinusSquareOutlined style={iconStyle} />,
+          }}
+          namesMapping={verboseMap}
+        />
+      </PivotTableWrapper>
     </Styles>
   );
 }