fix: instance name text overflow

src/pages/gpu-service/instances/hooks/use-instances-columns.tsx

@@ -86,11 +86,22 @@ const useInstancesColumns = ({
     const description = JSON.parse(record?.description || '{}').spec || {};
     return (
       <Flex align="flex-start" orientation="vertical">
-        <span className="text-primary">
+        <AutoTooltip
-          {description.acceleratable
+          ghost
-            ? `${description.product} x ${record.spec?.resources?.accelerator}`
+          title={
-            : 'CPU'}
+            <span>
-        </span>
+              {description.acceleratable
+                ? `${description.product} x ${record.spec?.resources?.accelerator}`
+                : 'CPU'}
+            </span>
+          }
+        >
+          <span className="text-primary">
+            {description.acceleratable
+              ? `${description.product} x ${record.spec?.resources?.accelerator}`
+              : 'CPU'}
+          </span>
+        </AutoTooltip>
         <Flex
           align="center"
           style={{ fontSize: 13, color: 'var(--ant-color-text-tertiary)' }}
@@ -239,17 +250,16 @@ const useInstancesColumns = ({
         ellipsis: {
           showTitle: false
         },
-        width: 220,
+        width: 260,
-        render: (_text: string, record: ListItem) => (
+        render: (_text: string, record: ListItem) => renderInstanceType(record)
-          <div style={{ width: 'max-content' }}>
-            <AutoTooltip ghost>{renderInstanceType(record)}</AutoTooltip>
-          </div>
-        )
       },
       {
         title: intl.formatMessage({ id: 'clusters.title' }),
         dataIndex: 'clusterId',
         hidden: !access.canSeeAdmin,
+        ellipsis: {
+          showTitle: false
+        },
         render: (id: number) => (
           <AutoTooltip ghost maxWidth={240}>
             {_.find(clusterList, { value: id })?.label || id || '-'}
@@ -264,6 +274,7 @@ const useInstancesColumns = ({
         ellipsis: {
           showTitle: false
         },
+        width: 180,
         render: (text: string) => (
           <AutoTooltip ghost>
             {text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'}

src/pages/llmodels/components/instance-cells/actions-cell.tsx

@@ -102,7 +102,7 @@ const ActionsCell: React.FC<ActionsCellProps> = ({
   ) => {
     api.open({
       duration: data.duration,
-      message: renderMessage(data.filename),
+      title: renderMessage(data.filename),
       key: data.filename,
       closeIcon: (
         <span>{intl.formatMessage({ id: 'common.button.cancel' })}</span>

src/pages/llmodels/components/instance-cells/name-cell.tsx

@@ -115,7 +115,7 @@ const NameCell: React.FC<NameCellProps> = ({
   styles
 }) => {
   return (
-    <span className="flex-center instance-name">
+    <span className="instance-name flex-center" style={{ gap: 4 }}>
       <AutoTooltip title={record.name} ghost>
         <span className="m-r-5" style={styles?.label}>
           {record.name}

src/pages/llmodels/hooks/use-models-columns.tsx

@@ -12,7 +12,7 @@ import {
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Tooltip } from 'antd';
+import { Flex, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
 import _ from 'lodash';
@@ -158,12 +158,19 @@ const useModelsColumns = ({
         sorter: tableSorter(1),
         span: 5,
         render: (text: string, record: ListItem) => (
-          <span className="flex-center" style={{ maxWidth: '100%' }}>
+          <Flex align="center" gap={4} style={{ maxWidth: '100%' }}>
-            <AutoTooltip ghost>
+            <AutoTooltip
+              ghost
+              title={
+                <span style={{ color: 'var(--ant-color-text-light-solid)' }}>
+                  {text}
+                </span>
+              }
+            >
               <span className="text-primary font-400">{text}</span>
             </AutoTooltip>
             <ModelTag categoryKey={record.categories?.[0] || ''} />
-          </span>
+          </Flex>
         )
       },
       {

src/pages/llmodels/instance-view/use-instance-columns.tsx

@@ -4,7 +4,6 @@ import { ListItem as workerListItem } from '@/pages/resources/config/types';
 import { convertFileSize } from '@/utils';
 import { AutoTooltip, IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { Flex } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -12,7 +11,6 @@ import { useMemo } from 'react';
 import ActionsCell from '../components/instance-cells/actions-cell';
 import DistributeInfoCell from '../components/instance-cells/distribute-info-cell';
 import DownloadingStatusCell from '../components/instance-cells/downloading-status-cell';
-import InjectedParamsCell from '../components/instance-cells/injected-params-cell';
 import InstanceStatusCell from '../components/instance-cells/instance-status-cell';
 import NameCell, {
   NameCellProps
@@ -29,10 +27,6 @@ const WorkerInfoContent: React.FC<NameCellProps> = ({ record, modelData }) => {
   return (
     <div>
       <div>{record.worker_name}</div>
-      {/* <div className="flex-center">
-        <HddFilled className="m-r-5 text-tertiary" style={{ fontSize: 12 }} />
-        <span className="text-secondary">{workerIp}</span>
-      </div> */}
       <div className="flex-center">
         <IconFont
           type="icon-filled-gpu"
@@ -48,18 +42,6 @@ const WorkerInfoContent: React.FC<NameCellProps> = ({ record, modelData }) => {
           ]
         </span>
       </div>
-      {/* <div className="flex-center">
-        <ThunderboltFilled
-          className="m-r-5 text-tertiary"
-          style={{ fontSize: 12 }}
-        />
-        <span className="text-secondary">
-          {record?.backend || modelData?.backend || ''}
-          {record.backend_version || modelData?.backend_version
-            ? `(${record.backend_version || modelData?.backend_version})`
-            : ''}
-        </span>
-      </div> */}
     </div>
   );
 };
@@ -101,38 +83,20 @@ const useInstancesColumns = (options: {
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         sorter: tableSorter(1),
-        minWidth: 160,
         render: (value: string, record: ListItem) => (
-          <>
+          <NameCell
-            <Flex gap={8} wrap="wrap">
+            showWorkerInfo={true}
-              <NameCell
+            record={record}
-                showWorkerInfo={true}
+            modelData={{
-                record={record}
+              backend: record.backend,
-                modelData={{
+              backend_version: record.backend_version
-                  backend: record.backend,
+            }}
-                  backend_version: record.backend_version
+            styles={{
-                }}
+              label: {
-                styles={{
+                color: 'var(--ant-color-text)'
-                  label: {
+              }
-                    color: 'var(--ant-color-text)'
+            }}
-                  }
+          ></NameCell>
-                }}
-              ></NameCell>
-              <InjectedParamsCell record={record}></InjectedParamsCell>
-            </Flex>
-            {/* <div className="flex-center">
-              <ThunderboltFilled
-                className="m-r-5 text-quaternary"
-                style={{ fontSize: 12, position: 'relative', top: 2 }}
-              />
-              <span className="text-quaternary">
-                {record?.backend || record?.backend || ''}
-                {record.backend_version || record?.backend_version
-                  ? `(${record.backend_version || record?.backend_version})`
-                  : ''}
-              </span>
-            </div> */}
-          </>
         )
       },
       {