style(realtime): fix layout for realtime protocol

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 {