fix(style): table cell overflow

src/hooks/use-table-fetch.ts

@@ -37,6 +37,7 @@ export default function useTableFetch<T>(
     key?: (typeof PaginationKey)[keyof typeof PaginationKey];
     fetchAPI: (params: any, options?: any) => Promise<Global.PageResponse<T>>;
     deleteAPI?: (id: number, params?: any) => Promise<any>;
+    afterDelete?: (id?: number | number[]) => void;
     contentForDelete?: string;
     defaultData?: any[];
     events?: EventsType[];
@@ -48,6 +49,7 @@ export default function useTableFetch<T>(
   const {
     fetchAPI,
     deleteAPI,
+    afterDelete,
     contentForDelete,
     API,
     polling = false,
@@ -363,7 +365,7 @@ export default function useTableFetch<T>(
 
         // remove the deleted id from selected ids in row selection
         rowSelection.removeSelectedKeys([row.id]);
-
+        afterDelete?.(row.id);
         // ======== to avoid fetch data twice, because of debounceFetchData has been run =======
         if (!updateManually) {
           fetchData();
@@ -390,6 +392,7 @@ export default function useTableFetch<T>(
             successIds.push(id);
           }
         );
+        afterDelete?.(successIds);
         rowSelection.removeSelectedKeys(successIds);
         fetchData();
         return res;

src/pages/benchmark/hooks/use-benchmark-columns.tsx

@@ -27,7 +27,7 @@ const useBenchmarkColumns = (params: {
         dataIndex: 'name',
         sorter: tableSorter(1),
         render: (text: string, record) => (
-          <AutoTooltip ghost minWidth={20}>
+          <AutoTooltip ghost minWidth={20} title={text}>
             <Typography.Link onClick={() => onCellClick?.(record, 'name')}>
               {text}
             </Typography.Link>

src/pages/cluster-management/hooks/use-credential-columns.tsx

@@ -20,7 +20,7 @@ const useCredentialColumns = (
         dataIndex: 'name',
         sorter: tableSorter(1),
         render: (text: string) => (
-          <AutoTooltip ghost minWidth={20}>
+          <AutoTooltip ghost minWidth={20} title={text}>
             <span className="text-primary">{text}</span>
           </AutoTooltip>
         )

src/pages/dashboard/components/active-table.tsx

@@ -30,7 +30,16 @@ const ActiveTable = () => {
       ellipsis: true,
       render: (text: any, record: any) => {
         return (
-          <AutoTooltip ghost>
+          <AutoTooltip
+            ghost
+            title={
+              <span>
+                {record.provider_name
+                  ? `${record.provider_name}/${text}`
+                  : text}
+              </span>
+            }
+          >
             <span className="text-primary">
               {record.provider_name ? `${record.provider_name}/${text}` : text}
             </span>

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

@@ -195,7 +195,11 @@ const useInstancesColumns = ({
           showTitle: false
         },
         render: (text: string, record: ListItem) => (
-          <AutoTooltip ghost style={{ maxWidth: 360 }}>
+          <AutoTooltip
+            ghost
+            title={<span>{record.displayName || text}</span>}
+            maxWidth={300}
+          >
             <span className="text-primary">{record.displayName || text}</span>
           </AutoTooltip>
         )
@@ -312,7 +316,7 @@ const useInstancesColumns = ({
         ellipsis: {
           showTitle: false
         },
-        width: 260,
+        width: 300,
         render: (_text: string, record: ListItem) => renderInstanceType(record)
       },
       {

src/pages/gpu-service/public-keys/hooks/use-public-key-columns.tsx

@@ -44,7 +44,11 @@ const usePublicKeyColumns = ({
           showTitle: false
         },
         render: (text: string, record: ListItem) => (
-          <AutoTooltip ghost style={{ maxWidth: 360 }}>
+          <AutoTooltip
+            ghost
+            style={{ maxWidth: 360 }}
+            title={<span>{record.displayName || text}</span>}
+          >
             <span className="text-primary">{record.displayName || text}</span>
           </AutoTooltip>
         )

src/pages/gpu-service/storage-types/hooks/use-storage-type-columns.tsx

@@ -55,7 +55,11 @@ const useStorageTypeColumns = ({
         sorter: true,
         ellipsis: { showTitle: false },
         render: (text: string, record: ListItem) => (
-          <AutoTooltip ghost minWidth={20}>
+          <AutoTooltip
+            ghost
+            minWidth={20}
+            title={<span>{record.displayName || text}</span>}
+          >
             <span className="text-primary">{record.displayName || text}</span>
           </AutoTooltip>
         )

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

@@ -29,7 +29,11 @@ const useStorageColumns = ({
           showTitle: false
         },
         render: (text: string, record: ListItem) => (
-          <AutoTooltip ghost style={{ maxWidth: 360 }}>
+          <AutoTooltip
+            ghost
+            style={{ maxWidth: 360 }}
+            title={<span>{record.displayName || text}</span>}
+          >
             <span className="text-primary">{record.displayName || text}</span>
           </AutoTooltip>
         )

src/pages/resources/hooks/use-gpu-columns.tsx

@@ -51,7 +51,7 @@ const useGPUColumns = (props: {
         minWidth: 32,
         sorter: tableSorter(1),
         render: (text: string, record: GPUDeviceItem) => (
-          <AutoTooltip ghost maxWidth={240}>
+          <AutoTooltip ghost maxWidth={240} title={text}>
             <span className="text-primary">{text}</span>
           </AutoTooltip>
         )

src/pages/resources/hooks/use-worker-columns.tsx

@@ -390,7 +390,7 @@ const useWorkerColumns = ({
         sorter: tableSorter(1),
         render: (text: string, record: ListItem) => (
           <div className={workerCss.name}>
-            <AutoTooltip ghost maxWidth={200}>
+            <AutoTooltip ghost maxWidth={200} title={text}>
               <span className="name-text">{text}</span>
             </AutoTooltip>
             {renderVersionInfo(record)}

src/pages/users/hooks/use-users-columns.tsx

@@ -138,7 +138,7 @@ const useUsersColumns = ({
         key: 'username',
         sorter: tableSorter(1),
         render: (text: string, record: ListItem) => (
-          <AutoTooltip ghost style={{ maxWidth: 400 }}>
+          <AutoTooltip ghost style={{ maxWidth: 400 }} title={text}>
             <span className="text-primary">{text}</span>
           </AutoTooltip>
         )