Style scrollbars.

components/metrics/DataTable.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
@@ -18,6 +19,7 @@ export default function DataTable({
   virtualize = false,
   showPercentage = true,
 }) {
+  const [ref, bounds] = useMeasure();
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
 
@@ -56,10 +58,10 @@ export default function DataTable({
           {metric}
         </div>
       </div>
-      <div className={styles.body} style={{ height }}>
+      <div ref={ref} className={styles.body}>
         {data?.length === 0 && <NoData />}
         {virtualize && data.length > 0 ? (
-          <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
+          <FixedSizeList height={bounds.height} itemCount={data.length} itemSize={30}>
             {Row}
           </FixedSizeList>
         ) : (

components/metrics/MetricsTable.module.css

@@ -4,6 +4,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .footer {

components/metrics/PagesTable.js

@@ -35,12 +35,12 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
     <>
       {showFilters && <FilterButtons items={buttons} selectedKey={view} onSelect={handleSelect} />}
       <MetricsTable
+        {...props}
         title={formatMessage(labels.pages)}
         type={view}
         metric={formatMessage(labels.views)}
         websiteId={websiteId}
         renderLabel={renderLink}
-        {...props}
       />
     </>
   );