From 8bd289ad019fc77c719507b26b8aa8690902cb92 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 19 Apr 2023 11:46:41 -0700
Subject: [PATCH] Fixed realtime metrics display. Closes #1899.

---
 components/pages/realtime/RealtimeHeader.js      | 16 ++++++++++++++--
 .../pages/realtime/RealtimeHeader.module.css     | 11 +++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/components/pages/realtime/RealtimeHeader.js b/components/pages/realtime/RealtimeHeader.js
index 5a7e1c3f..a5543be4 100644
--- a/components/pages/realtime/RealtimeHeader.js
+++ b/components/pages/realtime/RealtimeHeader.js
@@ -9,14 +9,26 @@ export default function RealtimeHeader({ data = {} }) {
   return (
     <div className={styles.header}>
       <div className={styles.metrics}>
-        <MetricCard label={formatMessage(labels.views)} value={pageviews?.length} hideComparison />
         <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.views)}
+          value={pageviews?.length}
+          hideComparison
+        />
+        <MetricCard
+          className={styles.card}
           label={formatMessage(labels.visitors)}
           value={visitors?.length}
           hideComparison
         />
-        <MetricCard label={formatMessage(labels.events)} value={events?.length} hideComparison />
         <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.events)}
+          value={events?.length}
+          hideComparison
+        />
+        <MetricCard
+          className={styles.card}
           label={formatMessage(labels.countries)}
           value={countries?.length}
           hideComparison
diff --git a/components/pages/realtime/RealtimeHeader.module.css b/components/pages/realtime/RealtimeHeader.module.css
index a326e631..f87d86e8 100644
--- a/components/pages/realtime/RealtimeHeader.module.css
+++ b/components/pages/realtime/RealtimeHeader.module.css
@@ -7,4 +7,15 @@
 
 .metrics {
   display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  justify-self: flex-start;
+}
+
+@media only screen and (max-width: 992px) {
+  .card {
+    flex-basis: calc(50% - 20px);
+  }
 }