diff --git a/frontend/src/pages/inbounds/list/InboundList.tsx b/frontend/src/pages/inbounds/list/InboundList.tsx index c17d074e8..b233456a8 100644 --- a/frontend/src/pages/inbounds/list/InboundList.tsx +++ b/frontend/src/pages/inbounds/list/InboundList.tsx @@ -133,6 +133,11 @@ export default function InboundList({ onSwitchEnable, }); + const tableScrollX = useMemo( + () => columns.reduce((sum, c) => sum + (typeof c.width === 'number' ? c.width : 0), 0), + [columns], + ); + const paginationFor = (rows: DBInboundRecord[]) => { const size = pageSize > 0 ? pageSize : rows.length || 1; return { pageSize: size, showSizeChanger: false, hideOnSinglePage: true }; @@ -252,7 +257,7 @@ export default function InboundList({ onChange: (keys: Key[]) => setSelectedRowKeys(keys as number[]), }} pagination={paginationFor(visibleInbounds)} - scroll={{ x: 1000 }} + scroll={{ x: tableScrollX }} style={{ marginTop: 10 }} size="small" locale={{ diff --git a/frontend/src/pages/inbounds/list/useInboundColumns.tsx b/frontend/src/pages/inbounds/list/useInboundColumns.tsx index 4839ed213..4bb02275a 100644 --- a/frontend/src/pages/inbounds/list/useInboundColumns.tsx +++ b/frontend/src/pages/inbounds/list/useInboundColumns.tsx @@ -57,13 +57,13 @@ export function useInboundColumns({ dataIndex: 'id', key: 'id', align: 'right', - width: 30, + width: 60, }, { title: t('pages.inbounds.operate'), key: 'action', align: 'center', - width: 60, + width: 70, render: (_, record) => ( ( { if (record.nodeId == null) { return {t('pages.inbounds.localPanel')}; @@ -128,7 +128,7 @@ export function useInboundColumns({ dataIndex: 'subSortIndex', key: 'subSortIndex', align: 'right', - width: 70, + width: 90, }); } @@ -138,13 +138,13 @@ export function useInboundColumns({ dataIndex: 'port', key: 'port', align: 'center', - width: 40, + width: 80, }, { title: t('pages.inbounds.protocol'), key: 'protocol', align: 'left', - width: 130, + width: 190, render: (_, record) => { const tags: ReactElement[] = [{record.protocol}]; if (record.isWireguard || record.isHysteria) { @@ -172,7 +172,7 @@ export function useInboundColumns({ title: t('clients'), key: 'clients', align: 'left', - width: 110, + width: 200, render: (_, record) => { const cc = clientCount[record.id]; if (!cc) return null; @@ -237,7 +237,7 @@ export function useInboundColumns({ title: t('pages.inbounds.traffic'), key: 'traffic', align: 'center', - width: 90, + width: 140, render: (_, record) => ( { const speed = inboundSpeed[record.id]; if (!isActiveSpeed(speed)) { @@ -282,7 +282,7 @@ export function useInboundColumns({ title: t('pages.inbounds.expireDate'), key: 'expiryTime', align: 'center', - width: 40, + width: 100, render: (_, record) => { if (record.expiryTime > 0) { return (