Updated sticky header logic.

components/metrics/MetricCard.module.css

@@ -2,21 +2,25 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-height: 90px;
   min-width: 140px;
 }
 
 .value {
-  min-height: 36px;
+  display: flex;
+  align-items: center;
   font-size: 36px;
   font-weight: 700;
   white-space: nowrap;
+  min-height: 60px;
 }
 
 .label {
-  white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 5px;
+  white-space: nowrap;
+  min-height: 30px;
 }
 
 .change {

components/metrics/MetricsBar.module.css

@@ -2,10 +2,7 @@
   display: flex;
   cursor: pointer;
   min-height: 80px;
-}
-
-.bar > div + div {
-  padding-left: 20px;
+  gap: 20px;
 }
 
 @media only screen and (max-width: 992px) {

components/metrics/WebsiteChart.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { Button, Icon, Text, Row, Column, Loading } from 'react-basics';
+import { Button, Icon, Text, Row, Column, Container } from 'react-basics';
 import Link from 'next/link';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';

components/metrics/WebsiteChart.module.css

@@ -18,6 +18,7 @@
 
 .header {
   min-height: 90px;
+  margin-bottom: 20px;
 }
 
 .metrics {
@@ -25,16 +26,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 0;
 }
 
 .sticky {
   position: fixed;
   top: 0;
-  margin: auto;
   background: var(--base50);
   border-bottom: 1px solid var(--base300);
   z-index: 3;
+  width: inherit;
 }
 
 .filter {