Updated fetch hook.

components/metrics/RealtimeLog.js

@@ -94,14 +94,24 @@ export default function RealtimeLog({ data, websites }) {
     }
   }
 
+  function getTime({ created_at }) {
+    return format(new Date(created_at), 'h:mm:ss');
+  }
+
+  function getColor(row) {
+    const { session_id } = row;
+
+    return stringToColor(uuids[session_id] || `${session_id}${getWebsite(row)}`);
+  }
+
   const Row = ({ index, style }) => {
     const row = logs[index];
     return (
       <div className={styles.row} style={style}>
         <div>
-          <Dot color={stringToColor(uuids[row.session_id] || `${row.session_id}`)} />
+          <Dot color={getColor(row)} />
         </div>
-        <div className={styles.time}>{format(new Date(row.created_at), 'h:mm:ss')}</div>
+        <div className={styles.time}>{getTime(row)}</div>
         <div className={styles.detail}>
           <Icon className={styles.icon} icon={getIcon(row)} />
           {getDetail(row)}

components/metrics/RealtimeLog.module.css

@@ -34,15 +34,12 @@
 
 .website {
   text-align: right;
-  padding-right: 20px;
+  padding: 0 20px;
 }
 
 .detail {
   display: flex;
   flex: 1;
-}
-
-.detail span {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;