From bab4cd14cb24ed8e96fd2d7e8948fd2d6666d507 Mon Sep 17 00:00:00 2001 From: AirboZH Date: Sat, 14 Nov 2026 14:30:51 +0000 Subject: [PATCH] fix(connections): keep table header on one line when sorted (#8268) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(connections): prevent table header from wrapping when sorted The sort indicator was rendered inline with the header label without `white-space: nowrap`, so on narrow columns (e.g. "下载速度 ▲" needs ~66px but the default 76px column only leaves 60px after padding) the arrow wrapped onto a second line and made the header row taller. - keep the header label and sort indicator on one line, truncating the label with an ellipsis and never shrinking the indicator - widen the default width of the traffic/speed columns from 76 to 96 so labels plus the indicator fit by default in both zh and en Co-Authored-By: Claude Opus 5.5 * fix(connections): keep right-aligned header labels anchored when sorted For right-aligned columns the sort indicator appeared after the label, so toggling sorting pushed the label left. Reserve the indicator's space with a hidden placeholder on right-aligned columns so the label stays put when sorting changes. Co-Authored-By: Claude Opus 5.5 * docs(changelog): update changelog Co-Authored-By: Claude Opus 5.5 Co-authored-by: AirboZH Signed-off-by: ❤是纱雾酱哟～ <49941141+Dragon1573@users.noreply.github.com> * fix(changelog): move summary to correct section Signed-off-by: ❤是纱雾酱哟～ <49941141+Dragon1573@users.noreply.github.com> --------- Signed-off-by: ❤是纱雾酱哟～ <49941141+Dragon1573@users.noreply.github.com> Co-authored-by: Claude Opus 5.5 Co-authored-by: ❤是纱雾酱哟～ <49941141+Dragon1573@users.noreply.github.com> --- Changelog.md | 1 + .../connection/connection-table.tsx | 39 ++++++++++++++----- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/Changelog.md b/Changelog.md index c6ddb0a0f..9d30c4ec4 100644 --- a/Changelog.md +++ b/Changelog.md @@ -31,6 +31,7 @@ - 修复订阅中唯一的代理组名为 `GLOBAL` 或没有代理组时，规则模式下代理页面显示「未获取到代理信息」 - 修复窗口较窄时，首页「当前节点」卡片中过长的节点名把延迟标签挤出卡片 - 修复断开链式代理时清空已选节点，导致再次连接需要重新选择的问题 +- 修复「连接」页表格排序时表头换行、标题位置跳动的问题 **🍎 macOS** diff --git a/src/components/connection/connection-table.tsx b/src/components/connection/connection-table.tsx index 37481c47e..bb8d90dc6 100644 --- a/src/components/connection/connection-table.tsx +++ b/src/components/connection/connection-table.tsx @@ -389,7 +389,7 @@ export const ConnectionTable = (props: Props) => { { field: 'download', headerName: t('shared.labels.downloaded'), - width: 76, + width: 96, minWidth: 60, align: 'right', cell: (_, snapshot) => snapshot.downloadText, @@ -397,7 +397,7 @@ export const ConnectionTable = (props: Props) => { { field: 'upload', headerName: t('shared.labels.uploaded'), - width: 76, + width: 96, minWidth: 60, align: 'right', cell: (_, snapshot) => snapshot.uploadText, @@ -405,7 +405,7 @@ export const ConnectionTable = (props: Props) => { { field: 'dlSpeed', headerName: t('connections.components.fields.dlSpeed'), - width: 76, + width: 96, minWidth: 60, align: 'right', cell: (_, snapshot) => snapshot.downloadSpeedText, @@ -413,7 +413,7 @@ export const ConnectionTable = (props: Props) => { { field: 'ulSpeed', headerName: t('connections.components.fields.ulSpeed'), - width: 76, + width: 96, minWidth: 60, align: 'right', cell: (_, snapshot) => snapshot.uploadSpeedText, @@ -798,6 +798,7 @@ export const ConnectionTable = (props: Props) => { onClick={() => toggleSorting(column.field)} style={{ flex: 1, + minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: @@ -809,15 +810,33 @@ export const ConnectionTable = (props: Props) => { color: 'inherit', font: 'inherit', textAlign: column.align === 'right' ? 'right' : 'left', + whiteSpace: 'nowrap', cursor: 'pointer', }} > - {column.headerName} - {sorting?.id === column.field - ? sorting.desc - ? '▼' - : '▲' - : null} + + {column.headerName} + + {sorting?.id === column.field ? ( + + {sorting.desc ? '▼' : '▲'} + + ) : column.align === 'right' ? ( + // Reserve the indicator's space so right-aligned labels + // don't shift when sorting is toggled. + + ▲ + + ) : null}