Added grid layout components.

components/metrics/EventsChart.js

@@ -8,7 +8,7 @@ import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import { EVENT_COLORS } from 'lib/constants';
 
-export default function EventsChart({ websiteId, token }) {
+export default function EventsChart({ websiteId, className, token }) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, modified } = dateRange;
   const [timezone] = useTimezone();
@@ -79,6 +79,7 @@ export default function EventsChart({ websiteId, token }) {
   return (
     <BarChart
       chartId={`events-${websiteId}`}
+      className={className}
       datasets={datasets}
       unit={unit}
       records={getDateLength(startDate, endDate, unit)}

components/metrics/RealtimeLog.js

@@ -119,6 +119,9 @@ export default function RealtimeLog({ data, websites }) {
 
   return (
     <div className={styles.log}>
+      <div className={styles.header}>
+        <FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
+      </div>
       <Table
         className={styles.table}
         bodyClassName={styles.body}
@@ -126,7 +129,7 @@ export default function RealtimeLog({ data, websites }) {
         rows={logs}
         showHeader={false}
       >
-        <FixedSizeList height={300} itemCount={logs.length} itemSize={46}>
+        <FixedSizeList height={400} itemCount={logs.length} itemSize={46}>
           {Row}
         </FixedSizeList>
       </Table>

components/metrics/RealtimeLog.module.css

@@ -2,13 +2,20 @@
   font-size: var(--font-size-xsmall);
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 40px;
+  font-weight: 600;
+}
+
 .row {
   display: flex;
   border-bottom: 1px solid var(--gray300);
 }
 
 .body {
-  height: 600px;
   overflow: auto;
 }