diff --git a/CLAUDE.md b/CLAUDE.md index affdc97b..4f0f8b35 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -98,6 +98,10 @@ Compose layout with Ant components, not hand-written `display: flex`. Drive spacing with the theme scale (`Flex`/`Space` `gap`, or `var(--ant-*)` spacing tokens), not scattered `px` literals. +## Tables + +- **Horizontally scrollable table**: set `scroll={{ x: 'max-content' }}` **and** add `className="scroll-table"` on the `Table`. The class styles the horizontal scroll to match the design; without it the scroll works but looks off. + # Naming conventions A page module lives under `src/pages/{module}` with this sub-structure: `components/`, `config/`, `forms/`, `hooks/`, `services/`, `index.tsx`. File naming: diff --git a/src/pages/gpu-service/instance-types/hooks/use-instance-type-columns.tsx b/src/pages/gpu-service/instance-types/hooks/use-instance-type-columns.tsx index 7eaea27f..cc1342f2 100644 --- a/src/pages/gpu-service/instance-types/hooks/use-instance-type-columns.tsx +++ b/src/pages/gpu-service/instance-types/hooks/use-instance-type-columns.tsx @@ -7,7 +7,7 @@ import { ThemeTag } from '@gpustack/core-ui'; import { useIntl } from '@umijs/max'; -import { Space, Tooltip } from 'antd'; +import { Flex, Space, Tooltip } from 'antd'; import type { ColumnsType } from 'antd/lib/table'; import _ from 'lodash'; import { useMemo } from 'react'; @@ -65,7 +65,7 @@ const useInstanceTypeColumns = ({ key: 'name', ellipsis: { showTitle: false }, render: (text: string) => ( - + {text || '-'} ) @@ -75,10 +75,24 @@ const useInstanceTypeColumns = ({ dataIndex: ['spec', 'product'], key: 'product', ellipsis: { showTitle: false }, - render: (text: string) => ( - - {text || '-'} - + render: (text: string, record: ListItem) => ( + + + {text || '-'} + + {record.spec?.sliceable && ( + + {intl.formatMessage({ id: 'gpuservice.instance.sliceable' })} + + )} + ) }, { @@ -184,7 +198,15 @@ const useInstanceTypeColumns = ({ const os = _.capitalize(record.spec?.os || ''); const arch = _.toUpper(record.spec?.arch || ''); if (!os) return '-'; - return arch ? `${os} (${arch})` : os; + return ( + + {arch ? `${os} (${arch})` : os} + + ); } }, { diff --git a/src/pages/gpu-service/instance-types/index.tsx b/src/pages/gpu-service/instance-types/index.tsx index 942b6dbd..3330ff37 100644 --- a/src/pages/gpu-service/instance-types/index.tsx +++ b/src/pages/gpu-service/instance-types/index.tsx @@ -207,6 +207,8 @@ const GPUServiceInstanceTypes: React.FC = () => {