From f93ecdfee8dfda78ecb0861a6fb3aefcccad31bf Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Sun, 21 Feb 2021 15:12:49 +0100
Subject: [PATCH] style(realtime): fix layout for realtime protocol

---
 components/metrics/RealtimeLog.js         | 8 +++++---
 components/metrics/RealtimeLog.module.css | 4 ++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js
index 63add268..b5e7a65b 100644
--- a/components/metrics/RealtimeLog.js
+++ b/components/metrics/RealtimeLog.js
@@ -176,9 +176,11 @@ export default function RealtimeLog({ data, websites, websiteId }) {
       </div>
       <div className={styles.body}>
         {logs?.length === 0 && <NoData />}
-        <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
-          {Row}
-        </FixedSizeList>
+        {logs?.length > 0 && (
+          <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
+            {Row}
+          </FixedSizeList>
+        )}
       </div>
     </div>
   );
diff --git a/components/metrics/RealtimeLog.module.css b/components/metrics/RealtimeLog.module.css
index 6fb09a64..7c07d017 100644
--- a/components/metrics/RealtimeLog.module.css
+++ b/components/metrics/RealtimeLog.module.css
@@ -1,6 +1,9 @@
 .table {
   font-size: var(--font-size-xsmall);
   overflow: hidden;
+  height: 100%;
+  display: grid;
+  grid-template-rows: fit-content(100%) fit-content(100%) auto;
 }
 
 .header {
@@ -21,6 +24,7 @@
 
 .body {
   overflow: auto;
+  height: 100%;
 }
 
 .icon {