Responsive CSS updates.

components/metrics/BarChart.js

@@ -24,7 +24,7 @@ export default function BarChart({
 }) {
   const canvas = useRef();
   const chart = useRef();
-  const [tooltip, setTooltip] = useState({});
+  const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
   const colors = {
@@ -69,18 +69,19 @@ export default function BarChart({
   function renderTooltip(model) {
     const { opacity, title, body, labelColors } = model;
 
-    if (!opacity) {
+    if (!opacity || !title) {
       setTooltip(null);
-    } else {
-      const [label, value] = body[0].lines[0].split(':');
-
-      setTooltip({
-        title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
-        value,
-        label,
-        labelColor: labelColors[0].backgroundColor,
-      });
+      return;
     }
+
+    const [label, value] = body[0].lines[0].split(':');
+
+    setTooltip({
+      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+      value,
+      label,
+      labelColor: labelColors[0].backgroundColor,
+    });
   }
 
   function getTooltipFormat(unit) {

components/metrics/MetricCard.module.css

@@ -3,7 +3,6 @@
   flex-direction: column;
   justify-content: center;
   min-width: 140px;
-  padding-right: 20px;
 }
 
 .value {

components/metrics/MetricsBar.module.css

@@ -3,11 +3,15 @@
   cursor: pointer;
 }
 
+.bar > div + div {
+  padding-left: 20px;
+}
+
 @media only screen and (max-width: 992px) {
   .bar {
     justify-content: space-between;
   }
-  .bar > div:last-child {
+  .bar > div:nth-child(n + 3) {
     display: none;
   }
 }

components/metrics/MetricsTable.js

@@ -24,7 +24,6 @@ export default function MetricsTable({
   dataFilter,
   filterOptions,
   limit,
-  headerComponent,
   renderLabel,
   onDataLoad = () => {},
   onExpand = () => {},
@@ -85,7 +84,6 @@ export default function MetricsTable({
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>
-            {headerComponent}
             <div className={styles.metric} onClick={handleSetFormat}>
               {metric}
             </div>

components/metrics/MetricsTable.module.css

@@ -2,7 +2,6 @@
   position: relative;
   min-height: 460px;
   font-size: var(--font-size-small);
-  padding: 20px 0;
   display: flex;
   flex-direction: column;
 }

components/metrics/PagesTable.js

@@ -4,6 +4,7 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { urlFilter } from 'lib/filters';
 import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 import MetricsTable from './MetricsTable';
+import ButtonLayout from '../layout/ButtonLayout';
 
 export default function PagesTable({ websiteId, token, websiteDomain, limit, onExpand }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
@@ -17,24 +18,28 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, onE
   ];
 
   return (
-    <MetricsTable
-      title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
-      type="url"
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      headerComponent={
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
-      }
-      websiteId={websiteId}
-      token={token}
-      limit={limit}
-      dataFilter={urlFilter}
-      filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
-      renderLabel={({ x }) => decodeURI(x)}
-      onExpand={onExpand}
-    />
+    <>
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
+        type="url"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        token={token}
+        limit={limit}
+        dataFilter={urlFilter}
+        filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
+        renderLabel={({ x }) => decodeURI(x)}
+        onExpand={onExpand}
+      />
+    </>
   );
 }
 
 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };

components/metrics/ReferrersTable.js

@@ -4,6 +4,7 @@ import MetricsTable from './MetricsTable';
 import { refFilter } from 'lib/filters';
 import ButtonGroup from 'components/common/ButtonGroup';
 import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
+import ButtonLayout from '../layout/ButtonLayout';
 
 export default function ReferrersTable({
   websiteId,
@@ -37,29 +38,33 @@ export default function ReferrersTable({
   };
 
   return (
-    <MetricsTable
-      title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
-      type="referrer"
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      headerComponent={
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
-      }
-      websiteId={websiteId}
-      websiteDomain={websiteDomain}
-      token={token}
-      limit={limit}
-      dataFilter={refFilter}
-      filterOptions={{
-        domain: websiteDomain,
-        domainOnly: filter === FILTER_DOMAIN_ONLY,
-        raw: filter === FILTER_RAW,
-      }}
-      onExpand={onExpand}
-      renderLabel={renderLink}
-    />
+    <>
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
+        type="referrer"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        websiteDomain={websiteDomain}
+        token={token}
+        limit={limit}
+        dataFilter={refFilter}
+        filterOptions={{
+          domain: websiteDomain,
+          domainOnly: filter === FILTER_DOMAIN_ONLY,
+          raw: filter === FILTER_RAW,
+        }}
+        onExpand={onExpand}
+        renderLabel={renderLink}
+      />
+    </>
   );
 }
 
 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };

components/metrics/WebsiteHeader.js

@@ -14,7 +14,7 @@ export default function WebsiteHeader({ websiteId, token, title, showLink = fals
     <PageHeader>
       <div className={styles.title}>{title}</div>
       <ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
-      <ButtonLayout>
+      <ButtonLayout align="right">
         <RefreshButton websiteId={websiteId} />
         {showLink && (
           <Link