Merge pull request #499 from gnarlex/fix-style-issues

Fix "No data available" display issues

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%;
 }

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;
   }
 }

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;
 }
 

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;

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>
   );

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 {