fix: scroll shake on log page

5 files changed, 23 insertions, 33 deletions

diff --git a/src/components/ConnectionTable.module.scss b/src/components/ConnectionTable.module.scss
index d739d75..a4d53dd 100644
--- a/src/components/ConnectionTable.module.scss
+++ b/src/components/ConnectionTable.module.scss
@@ -10,7 +10,7 @@
   background: var(--color-background);
   position: sticky;
   top: 0;
-  font-size: 0.75em;
+  font-size: 0.9em;
   text-align: center;
   user-select: none;
 
@@ -25,8 +25,11 @@
 
 .td {
   padding: 8px 13px;
-  font-size: 0.75em;
-
+  font-size: 0.9em;
+  cursor:default;
+  &:hover {
+    color: var(--color-text-highlight);
+  }
   font-family: var(--font-normal);
 }
 
diff --git a/src/components/ErrorBoundaryFallback.tsx b/src/components/ErrorBoundaryFallback.tsx
index 7ab7d06..9f41d91 100644
--- a/src/components/ErrorBoundaryFallback.tsx
+++ b/src/components/ErrorBoundaryFallback.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import s0 from './ErrorBoundaryFallback.module.scss';
 import SvgGithub from './SvgGithub';
 import SvgYacd from './SvgYacd';
-const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues';
+const yacdRepoIssueUrl = 'https://github.com/metacubex/yacd';
 
 type Props = {
   message?: string;
@@ -21,7 +21,7 @@ function ErrorBoundaryFallback({ message, detail }: Props) {
       <p>
         <a className={s0.link} href={yacdRepoIssueUrl}>
           <SvgGithub width={16} height={16} />
-          haishanh/yacd
+          metacubex/yacd
         </a>
       </p>
     </div>
diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss
index d2a4ba3..d8bfce2 100644
--- a/src/components/Logs.module.scss
+++ b/src/components/Logs.module.scss
@@ -1,16 +1,8 @@
 .logMeta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  font-size: 0.9em;
-}
-
-.logCard {
-  margin-bottom: 15px;
-}
+  font-size: 0.8em;
+ }
 
 .logType {
-  color: #eee;
   flex-shrink: 0;
   text-align: center;
   width: 66px;
@@ -21,20 +13,16 @@
 
 .logTime {
   flex-shrink: 0;
-  color: #999;
-  font-size: 11px;
+  color: #fb923c;
 }
 
 .logText {
   flex-shrink: 0;
-  display: flex;
-  font-family: 'Roboto Mono', Menlo, monospace;
+  color: #888;
   align-items: center;
   padding: 8px 0;
   /* force wrap */
   width: 100%;
-  white-space: pre;
-  overflow: auto;
 }
 
 /*******************/
@@ -48,11 +36,11 @@
 
   :global {
     .log {
-      padding: 10px 40px;
-      background: var(--color-background);
+      margin-bottom: 10px;
+      //background: var(--color-background);
     }
     .log.even {
-      background: var(--color-background);
+      //background: var(--color-background);
     }
   }
 }
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 8a2a71d..b004a11 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -37,12 +37,12 @@ type LogLineProps = Partial<Log>;
 
 function LogLine({ time, payload, type }: LogLineProps) {
   return (
-    <span className={s.logTime}>
-        <span className={s.logTime} style={{color: '#fb923c'}}>{time}</span>
+    <span className={s.logMeta}>
+        <span className={s.logTime} >{time}</span>
         <span className={s.logType} style={{ color: colors[type]}}>
           [ {logTypes[type]} ]
         </span>
-        <span className={s.logTime} >{payload}</span>
+        <span className={s.logText} >{payload}</span>
       </span>
   );
 }
@@ -52,10 +52,10 @@ function itemKey(index: number, data: LogLineProps[]) {
   return item.id;
 }
 
-const Row = memo(({ index, data }: ListChildComponentProps<LogLineProps>) => {
+const Row = memo(({ index, style, data }: ListChildComponentProps<LogLineProps>) => {
   const r = data[index];
   return (
-    <div className={s.logCard} >
+    <div style={style}>
       <LogLine {...r} />
     </div>
   );
@@ -80,7 +80,7 @@ function Logs({ dispatch, logLevel, apiConfig, logs, logStreamingPaused }) {
     <div>
       <ContentHeader title={t('Logs')} />
       <LogSearch />
-      <div ref={refLogsContainer} style={{ paddingBottom }}>
+      <div ref={refLogsContainer}>
         {logs.length === 0 ? (
           <div className={s.logPlaceholder} style={{ height: containerHeight - paddingBottom }}>
             <div className={s.logPlaceholderIcon}>
@@ -91,7 +91,7 @@ function Logs({ dispatch, logLevel, apiConfig, logs, logStreamingPaused }) {
         ) : (
           <div className={s.logsWrapper}>
             <List
-              height={containerHeight - paddingBottom}
+              height={containerHeight - paddingBottom*2.5}
               width="100%"
               itemCount={logs.length}
               itemSize={40}
diff --git a/src/components/Root.module.scss b/src/components/Root.module.scss
index 6538b75..95b218e 100644
--- a/src/components/Root.module.scss
+++ b/src/components/Root.module.scss
@@ -6,7 +6,6 @@
   right: 0;
 
   display: flex;
-
   background: var(--color-background);
   color: var(--color-text);
 
@@ -17,7 +16,7 @@
 
 .content {
   flex-grow: 1;
-  overflow: auto;
+  overflow-y: auto;
 
   /*