fix(connections): keep table header on one line when sorted (#8268)

* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

* docs(changelog): update changelog

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: AirboZH <i@airbozh.cn>
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 <noreply@anthropic.com>
Co-authored-by: ❤是纱雾酱哟～ <49941141+Dragon1573@users.noreply.github.com>

Changelog.md

@@ -31,6 +31,7 @@
 - 修复订阅中唯一的代理组名为 `GLOBAL` 或没有代理组时，规则模式下代理页面显示「未获取到代理信息」
 - 修复窗口较窄时，首页「当前节点」卡片中过长的节点名把延迟标签挤出卡片
 - 修复断开链式代理时清空已选节点，导致再次连接需要重新选择的问题
+- 修复「连接」页表格排序时表头换行、标题位置跳动的问题
 
 **🍎 macOS**
 

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}
+                      <span
+                        style={{
+                          minWidth: 0,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                        }}
+                      >
+                        {column.headerName}
+                      </span>
+                      {sorting?.id === column.field ? (
+                        <span style={{ flexShrink: 0 }}>
+                          {sorting.desc ? '▼' : '▲'}
+                        </span>
+                      ) : column.align === 'right' ? (
+                        // Reserve the indicator's space so right-aligned labels
+                        // don't shift when sorting is toggled.
+                        <span
+                          aria-hidden
+                          style={{ flexShrink: 0, visibility: 'hidden' }}
+                        >
+                          ▲
+                        </span>
+                      ) : null}
                     </button>
                     <div
                       onMouseDown={(event) =>