fix(style): hide table cell content if too long

src/components/logs-viewer/index.less

@@ -26,11 +26,11 @@
   }
 
   .xterm {
-    height: 100% !important;
+    // height: 100% !important;
 
     .xterm-viewport {
       overflow-y: auto !important;
-      // custom scrollbar
+
       &::-webkit-scrollbar {
         width: var(--scrollbar-size);
         height: var(--scrollbar-size);

src/components/logs-viewer/index.tsx

@@ -26,7 +26,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const [logs, setLogs] = useState('');
   const size = useSize(scroller);
 
-  const throttleScroll = _.debounce(() => {
+  const throttleScroll = _.throttle(() => {
     termRef.current?.scrollToBottom?.();
   }, 100);
 
@@ -36,6 +36,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
       termRef.current?.clear?.();
       cacheDataRef.current = data;
       termRef.current?.write?.(data);
+      setLogs(data);
     }, 100),
     []
   );
@@ -78,11 +79,11 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     termRef.current.open(termwrapRef.current);
 
     // add event
-    termRef.current.onLineFeed((e: any) => {
-      if (cacheDataRef.current) {
-        throttleScroll();
-      }
-    });
+    // termRef.current.onLineFeed((e: any) => {
+    //   if (cacheDataRef.current) {
+    //     throttleScroll();
+    //   }
+    // });
   };
 
   const handleResize = _.throttle(() => {
@@ -111,6 +112,10 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     }
   }, [size]);
 
+  useEffect(() => {
+    throttleScroll();
+  }, [logs]);
+
   return (
     <div className="logs-viewer-wrap-w2">
       <div className="wrap" style={{ height: height }} ref={scroller}>