Murzaby/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-28 03:31:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(inbounds): rebalance table column widths so it fills width without gaps

Browse source 
Inbound list columns had small fixed widths summing far below the table's
full width, so AntD spread the leftover space evenly into wide empty gaps.
Widen the content-heavy columns (protocol, clients, traffic, node) so the
slack lands there, keep the small ones (id, port, enable) tight, and make
scroll.x track the visible columns' total so the table never collapses
below content and adapts when conditional columns are hidden.
This commit is contained in:
MHSanaei 2026-06-22 18:29:46 +02:00
parent 32e97cda5a
commit 79ff28373f
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
2 changed files with 18 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/pages/inbounds/list/InboundList.tsx
View file

@ -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={{

24
frontend/src/pages/inbounds/list/useInboundColumns.tsx
View file

@ -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) => (
<RowActionsCell
record={record}
@ -77,7 +77,7 @@ export function useInboundColumns({
title: t('pages.inbounds.enable'),
key: 'enable',
align: 'center',
width: 35,
width: 80,
render: (_, record) => (
<Switch
checked={record.enable}
@ -93,7 +93,7 @@ export function useInboundColumns({
dataIndex: 'remark',
key: 'remark',
align: 'center',
width: 60,
width: 90,
});
}
@ -102,7 +102,7 @@ export function useInboundColumns({
title: t('pages.inbounds.node'),
key: 'node',
align: 'center',
width: 60,
width: 130,
render: (_, record) => {
if (record.nodeId == null) {
return <Tag color="default">{t('pages.inbounds.localPanel')}</Tag>;
@ -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[] = [<Tag key="p" color="purple">{record.protocol}</Tag>];
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) => (
<Popover
content={(
@ -269,7 +269,7 @@ export function useInboundColumns({
title: t('pages.inbounds.speed'),
key: 'speed',
align: 'center',
width: 90,
width: 110,
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 (