CSS updates.

src/components/metrics/BarChart.js

@@ -145,7 +145,7 @@ export function BarChart({
   }, [datasets, unit, theme, animationDuration, locale]);
 
   return (
-    <>
+    <div className={styles.container}>
       <div className={classNames(styles.chart, className)}>
         {loading && <Loading position="page" icon="dots" />}
         <canvas ref={canvas} />
@@ -156,7 +156,7 @@ export function BarChart({
           <div className={styles.tooltip}>{tooltip}</div>
         </HoverTooltip>
       )}
-    </>
+    </div>
   );
 }
 

src/components/metrics/BarChart.module.css

@@ -1,3 +1,7 @@
+.container {
+  display: grid;
+}
+
 .chart {
   position: relative;
   height: 400px;

src/components/metrics/MetricsBar.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Loading, cloneChildren } from 'react-basics';
 import ErrorMessage from 'components/common/ErrorMessage';
-import styles from './MetricsBar.module.css';
 import { formatLongNumber, formatNumber } from 'lib/format';
+import styles from './MetricsBar.module.css';
 
 export function MetricsBar({ children, isLoading, isFetched, error }) {
   const [format, setFormat] = useState(true);
@@ -19,9 +19,12 @@ export function MetricsBar({ children, isLoading, isFetched, error }) {
     <div className={styles.bar} onClick={handleSetFormat}>
       {isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
-      {cloneChildren(children, child => {
-        return { format: child.props.format || formatFunc };
-      })}
+      {!isLoading &&
+        !error &&
+        isFetched &&
+        cloneChildren(children, child => {
+          return { format: child.props.format || formatFunc };
+        })}
     </div>
   );
 }

src/components/metrics/MetricsBar.module.css

@@ -1,18 +1,11 @@
 .bar {
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  min-height: 110px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
   gap: 20px;
-  flex-wrap: wrap;
 }
 
-.card {
-  justify-self: flex-start;
-}
-
-@media only screen and (max-width: 992px) {
-  .card {
-    flex-basis: calc(50% - 20px);
+@media screen and (max-width: 768px) {
+  .bar {
+    grid-template-columns: 1fr 1fr;
   }
 }