From 79ff28373f9080c981649c300a18a5fdeaa9d521 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Mon, 22 Jun 2026 18:29:46 +0200
Subject: [PATCH] fix(inbounds): rebalance table column widths so it fills
 width without gaps

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.
---
 .../src/pages/inbounds/list/InboundList.tsx   |  7 +++++-
 .../pages/inbounds/list/useInboundColumns.tsx | 24 +++++++++----------
 2 files changed, 18 insertions(+), 13 deletions(-)

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) => (
           <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 (