From 20932a4a113eb3bb7710c0976911cabad4a653e5 Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Sun, 21 Feb 2021 13:20:19 +0100
Subject: [PATCH 1/5] style(grid): grid row x-padding for smaller screens

---
 components/layout/GridLayout.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/GridLayout.module.css b/components/layout/GridLayout.module.css
index f17c195e..675fce16 100644
--- a/components/layout/GridLayout.module.css
+++ b/components/layout/GridLayout.module.css
@@ -35,6 +35,6 @@
   .row > .col {
     border-top: 1px solid var(--gray300);
     border-left: 0;
-    padding: 0;
+    padding: 20px 0;
   }
 }

From a981fa30c75ccd8fa85c29145c3aeab0a2ec596d Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Sun, 21 Feb 2021 13:25:27 +0100
Subject: [PATCH 2/5] style(MetricTable): fill container height

---
 components/metrics/MetricsTable.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/metrics/MetricsTable.module.css b/components/metrics/MetricsTable.module.css
index e93f536e..d3a70866 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -1,6 +1,7 @@
 .container {
   position: relative;
   min-height: 430px;
+  height: 100%;
   font-size: var(--font-size-small);
   display: flex;
   flex-direction: column;

From 98a60d0d3ecc08224d8e9284ee5f5defc54cf29a Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Sun, 21 Feb 2021 13:51:33 +0100
Subject: [PATCH 3/5] fix(Dashboard): "no data" caption not rendered

Change styling of `DataTable` to make `NoData` visible again.

Refs #498
---
 components/metrics/DataTable.module.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/metrics/DataTable.module.css b/components/metrics/DataTable.module.css
index b8b203c4..b21b92b9 100644
--- a/components/metrics/DataTable.module.css
+++ b/components/metrics/DataTable.module.css
@@ -1,14 +1,15 @@
 .table {
   position: relative;
+  height: 100%;
   font-size: var(--font-size-small);
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+  display: grid;
+  grid-template-rows: fit-content(100%) auto;
   overflow: hidden;
 }
 
 .body {
   position: relative;
+  height: 100%;
   overflow: auto;
 }
 

From c5e03cd5d4e68ae867cb4d40c2cd3414424ce7f9 Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Sun, 21 Feb 2021 14:39:30 +0100
Subject: [PATCH 4/5] fix(styling): "no data" caption not considered in height
 calculations

Change `NoData` container position to `relative`. Otherwise it won't be considered in `auto` height calculations by browsers.

Also change the way `NoData` content is centered.
---
 components/common/NoData.module.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/common/NoData.module.css b/components/common/NoData.module.css
index 82f9c3ee..518fa488 100644
--- a/components/common/NoData.module.css
+++ b/components/common/NoData.module.css
@@ -1,8 +1,11 @@
 .container {
   color: var(--gray500);
   font-size: var(--font-size-normal);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
 }

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 5/5] 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 {