Style scrollbars.

components/input/SettingsButton.js

@@ -1,4 +1,4 @@
-import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
+import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
 import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
 import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
 import Icons from 'components/icons';
@@ -10,13 +10,11 @@ export default function SettingsButton() {
 
   return (
     <PopupTrigger>
-      <Tooltip label={formatMessage(labels.settings)} position="bottom">
+      <Button variant="quiet">
-        <Button variant="quiet">
+        <Icon>
-          <Icon>
+          <Icons.Gear />
-            <Icons.Gear />
+        </Icon>
-          </Icon>
+      </Button>
-        </Button>
-      </Tooltip>
       <Popup
         className={styles.popup}
         position="bottom"

components/layout/AppLayout.module.css

@@ -19,3 +19,7 @@
   height: calc(100vh - 60px);
   overflow-y: auto;
 }
+
+.body::-webkit-scrollbar-track {
+  border: 0;
+}

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}
       />
     </>
   );

components/pages/websites/WebsiteMenuView.js

@@ -108,11 +108,10 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
         </Link>
         <SideNav items={items} selectedKey={view} shallow={true} />
       </GridColumn>
-      <GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
+      <GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.content}>
         <DetailsComponent
           websiteId={websiteId}
           websiteDomain={websiteDomain}
-          height={500}
           limit={false}
           animate={false}
           showFilters={true}

components/pages/websites/WebsiteMenuView.module.css

@@ -1,3 +1,7 @@
-.data {
+.menu {
-  min-height: 600px;
+  position: relative;
+}
+
+.content {
+  min-height: 800px;
 }

styles/index.css

@@ -63,3 +63,36 @@ svg {
   width: 100%;
   height: 100%;
 }
+
+::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-right: 2px solid var(--base200);
+}
+
+::-webkit-scrollbar-track:hover {
+  border-right: 2px solid var(--base300);
+}
+
+::-webkit-scrollbar-thumb {
+  position: relative;
+  border-right: 2px solid var(--base600);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  border-right: 8px solid var(--base700);
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  position: relative;
+  border-bottom: 2px solid var(--base600);
+}
+
+::-webkit-scrollbar-thumb:horizontal:hover {
+  border-bottom: 8px solid var(--base700);
+}