fix(style): model file list text overflow

src/assets/styles/common.less

@@ -1,3 +1,5 @@
+@import './table.less';
+
 .m-b-20 {
   margin-bottom: 20px;
 }

src/assets/styles/table.less

@@ -0,0 +1,10 @@
+.ant-table-thead {
+  .ant-table-column-sorters {
+    .ant-table-column-title {
+      min-width: 32px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}

src/layouts/sider-menu.tsx

@@ -64,6 +64,7 @@ const useStyles = createStyles(({ css, token }) => {
       }
 
       &.menu-item-group-title-collapsed {
+        position: relative;
         height: 1px;
         padding-block: 0;
         padding-inline: 0;
@@ -125,8 +126,8 @@ const useStyles = createStyles(({ css, token }) => {
       margin-block: 6px;
       background-color: ${token.colorSplit};
       position: absolute;
-      left: 6px;
-      right: 6px;
+      left: -2px;
+      right: -2px;
     `
   };
 });

src/pages/playground/components/ground-video.tsx

@@ -1,10 +1,9 @@
 import { setRouteCache } from '@/atoms/route-cache';
 import AlertInfo from '@/components/alert-info';
-import IconFont from '@/components/icon-font';
 import routeCachekey from '@/config/route-cachekey';
 import { VideoCameraOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Spin, Tooltip } from 'antd';
+import { Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -239,22 +238,6 @@ const GroundVideo: React.FC<MessageProps> = forwardRef((props, ref) => {
             onInputChange={handleInputChange}
             shouldResetMessage={false}
             clearAll={handleClear}
-            tools={
-              <>
-                <Tooltip
-                  title={intl.formatMessage({
-                    id: 'playground.image.prompt.random'
-                  })}
-                >
-                  <Button
-                    onClick={handleRandomPrompt}
-                    size="middle"
-                    type="text"
-                    icon={<IconFont type="icon-random"></IconFont>}
-                  ></Button>
-                </Tooltip>
-              </>
-            }
           />
         </div>
       </div>

src/pages/playground/config/video-parameters.ts

@@ -23,8 +23,8 @@ export const videoParamsConfig: ParamsSchema[] = [
       { label: '12', value: '12' }
     ],
     label: {
-      text: 'Duration (seconds)',
-      isLocalized: false
+      text: 'playground.params.duration',
+      isLocalized: true
     },
     rules: [
       {

src/pages/resources/components/gpus.tsx

@@ -110,14 +110,13 @@ const GPUList: React.FC<{ clusterId?: number; widths: { input: number } }> = ({
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
             columns={columns}
-            style={{ width: '100%' }}
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}
-            tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
+            tableLayout={'auto'}
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             rowKey="id"
-            scroll={{ x: true }}
+            scroll={{ x: 900 }}
             onChange={handleTableChange}
             pagination={{
               showSizeChanger: true,

src/pages/resources/components/model-files.tsx

@@ -319,7 +319,9 @@ const ModelFiles = () => {
             tableLayout="fixed"
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}
-            style={{ width: '100%' }}
+            scroll={{
+              x: 900
+            }}
             onChange={handleTableChange}
             dataSource={dataSource.dataList}
             loading={dataSource.loading}

src/pages/resources/components/workers.tsx

@@ -280,12 +280,11 @@ const Workers: React.FC<{
             columns={columns}
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}
-            tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
-            style={{ width: '100%' }}
+            tableLayout={'auto'}
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             rowKey="id"
-            scroll={{ x: true }}
+            scroll={{ x: 900 }}
             onChange={handleTableChange}
             rowSelection={rowSelection}
             pagination={{

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

@@ -31,6 +31,7 @@ const TextWrapper = styled.div`
   align-items: center;
   cursor: pointer;
   height: 100%;
+  min-width: 32px;
 `;
 
 const PathWrapper = styled.div`
@@ -267,9 +268,7 @@ const useFilesColumns = (props: {
         title: intl.formatMessage({ id: 'models.form.source' }),
         dataIndex: 'source',
         sorter: tableSorter(1),
-        ellipsis: {
-          showTitle: false
-        },
+        minWidth: 32,
         render: (text: string, record: ListItem) => {
           const modelInfo = getModelInfo(record);
           const { source } = modelInfo;
@@ -286,10 +285,7 @@ const useFilesColumns = (props: {
         title: intl.formatMessage({ id: 'resources.worker' }),
         dataIndex: 'worker_id',
         sorter: tableSorter(2),
-        width: '18%',
-        ellipsis: {
-          showTitle: false
-        },
+        minWidth: 32,
         render: (text: string, record: ListItem) => {
           return (
             <AutoTooltip ghost>

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

@@ -51,6 +51,7 @@ const useGPUColumns = (props: {
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         width: 240,
+        minWidth: 32,
         sorter: tableSorter(1),
         render: (text: string, record: GPUDeviceItem) => (
           <AutoTooltip ghost maxWidth={240}>
@@ -68,9 +69,6 @@ const useGPUColumns = (props: {
         title: intl.formatMessage({ id: 'clusters.title' }),
         dataIndex: 'cluster_id',
         sorter: tableSorter(3),
-        ellipsis: {
-          showTitle: false
-        },
         render: (text: number, record: GPUDeviceItem) => (
           <AutoTooltip ghost>
             {clusterList.find((item) => item.value === text)?.label}
@@ -81,9 +79,6 @@ const useGPUColumns = (props: {
         title: intl.formatMessage({ id: 'resources.worker' }),
         dataIndex: 'worker_name',
         sorter: tableSorter(4),
-        ellipsis: {
-          showTitle: false
-        },
         render: (text: string, record: GPUDeviceItem) => (
           <AutoTooltip ghost>{text}</AutoTooltip>
         )

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

@@ -279,7 +279,7 @@ const useWorkerColumns = ({
         width: 100,
         sorter: tableSorter(1),
         render: (text: string) => (
-          <AutoTooltip ghost maxWidth={240}>
+          <AutoTooltip ghost maxWidth={200}>
             {text}
           </AutoTooltip>
         )