fix(style): text overflow

src/components/auto-tooltip/index.tsx

@@ -1,5 +1,5 @@
 import { Tag, Tooltip, type TagProps } from 'antd';
-import debounce from 'lodash/debounce';
+import { throttle } from 'lodash';
 import React, {
   useCallback,
   useEffect,
@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import TitleTip from './title-tip';
 
 // type TagProps = React.ComponentProps<typeof Tag>;
 
@@ -34,6 +35,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const resizeObserver = useRef<ResizeObserver>();
 
   const checkOverflow = useCallback(() => {
     if (contentRef.current) {
@@ -42,19 +44,14 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
     }
   }, [contentRef.current]);
 
-  const debouncedCheckOverflow = useMemo(
-    () => debounce(checkOverflow, 200),
-    [checkOverflow]
-  );
-
   useEffect(() => {
-    checkOverflow();
+    const debouncedCheckOverflow = throttle(checkOverflow, 200);
     window.addEventListener('resize', debouncedCheckOverflow);
     return () => {
       window.removeEventListener('resize', debouncedCheckOverflow);
       debouncedCheckOverflow.cancel();
     };
-  }, [checkOverflow, debouncedCheckOverflow]);
+  }, [checkOverflow]);
 
   useEffect(() => {
     checkOverflow();
@@ -74,7 +71,17 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
 
   return (
     <Tooltip
-      title={isOverflowing || showTitle ? title || children : ''}
+      overlayInnerStyle={{ paddingInline: 0 }}
+      destroyTooltipOnHide={false}
+      title={
+        <TitleTip
+          isOverflowing={isOverflowing}
+          title={title}
+          showTitle={showTitle}
+        >
+          {children}
+        </TitleTip>
+      }
       {...tooltipProps}
     >
       {ghost ? (

src/components/auto-tooltip/title-tip.tsx

@@ -0,0 +1,31 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import React from 'react';
+
+interface TitleTipProps {
+  isOverflowing: boolean;
+  showTitle: boolean;
+  title: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const TitleTip: React.FC<TitleTipProps> = (props) => {
+  const { isOverflowing, showTitle, title, children } = props;
+  const { initialize } = useOverlayScroller();
+  const scrollRef = React.useRef<any>(null);
+
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      initialize(scrollRef.current);
+    }
+  }, [initialize, scrollRef.current]);
+
+  return (
+    <div style={{ maxHeight: 200, overflowY: 'auto' }} ref={scrollRef}>
+      <div style={{ width: 'max-content', maxWidth: 250, paddingInline: 10 }}>
+        {isOverflowing || showTitle ? title || children : ''}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(TitleTip);

src/components/highlight-code/code-viewer.tsx

@@ -73,6 +73,7 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
       }}
     >
       <code
+        style={{ minHeight: height }}
         className={highlightedCode.className}
         dangerouslySetInnerHTML={{
           __html: highlightedCode.value

src/components/logs-viewer/index.less

@@ -9,9 +9,11 @@
 
     button {
       color: rgba(255, 255, 255, 70%);
+      background-color: rgba(71, 71, 71, 100%);
 
       &:hover {
         color: rgba(255, 255, 255, 90%) !important;
+        background-color: rgba(71, 71, 71, 100%) !important;
       }
     }
   }

src/components/logs-viewer/index.tsx

@@ -3,7 +3,7 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import '@xterm/xterm/css/xterm.css';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CopyButton from '../copy-button';
 import './index.less';
 import useParseAnsi from './parse-ansi';
@@ -90,6 +90,13 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     updateScrollerPosition(0);
   }, 200);
 
+  const copyText = useMemo(() => {
+    if (!logs.length) {
+      return '';
+    }
+    return logs?.map((item) => item.content).join('\n');
+  }, [logs]);
+
   useEffect(() => {
     createChunkConnection();
     return () => {
@@ -121,11 +128,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   return (
     <div className="logs-viewer-wrap-w2">
       <span className="copy">
-        <CopyButton
-          text={logs?.map((item) => item.content).join('\n')}
-          type="text"
-          size="small"
-        ></CopyButton>
+        <CopyButton text={copyText} type="text" size="small"></CopyButton>
       </span>
       <div
         className="wrap"

src/components/version-info/index.tsx

@@ -11,7 +11,7 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
   const currentVersion = getAtomStorage(GPUStackVersionAtom)?.version;
 
   const isProd =
-    currentVersion !== '0.0.0' && currentVersion.indexOf('rc') === -1;
+    currentVersion !== '0.0.0' && currentVersion?.indexOf('rc') === -1;
 
   const uiVersion = document.documentElement.getAttribute('data-version');