fix(connections): allow full-width header sorting without triggering on resize

Changelog.md

@@ -44,5 +44,6 @@
 - 右键错误通知可复制错误详情
 - 保存 TUN 设置时优化执行流程，避免界面卡顿
 - 补充 `deb` / `rpm` 依赖 `libayatana-appindicator`
+- 「连接」表格标题的排序点击区域扩展到整列宽度
 
 </details>

src/components/connection/connection-table.tsx

@@ -582,15 +582,10 @@ export const ConnectionTable = (props: Props) => {
                           alignItems: "center",
                           position: "relative",
                           boxSizing: "border-box",
-                          px: 1,
-                          py: 1,
                           fontSize: 13,
                           fontWeight: 600,
                           color: "text.secondary",
                           userSelect: "none",
-                          justifyContent:
-                            meta?.align === "right" ? "flex-end" : "flex-start",
-                          gap: 0.25,
                           "&:hover": {
                             backgroundColor: (theme) =>
                               theme.palette.action.hover,
@@ -599,15 +594,26 @@ export const ConnectionTable = (props: Props) => {
                       >
                         <Box
                           component="span"
+                          onClick={
+                            header.column.getCanSort()
+                              ? header.column.getToggleSortingHandler()
+                              : undefined
+                          }
                           sx={{
-                            display: "inline-flex",
+                            flex: 1,
+                            display: "flex",
                             alignItems: "center",
+                            justifyContent:
+                              meta?.align === "right"
+                                ? "flex-end"
+                                : "flex-start",
                             gap: 0.5,
+                            px: 1,
+                            py: 1,
                             cursor: header.column.getCanSort()
                               ? "pointer"
                               : "default",
                           }}
-                          onClick={header.column.getToggleSortingHandler()}
                         >
                           {flexRender(
                             header.column.columnDef.header,
@@ -620,8 +626,15 @@ export const ConnectionTable = (props: Props) => {
                         </Box>
                         {header.column.getCanResize() && (
                           <Box
-                            onMouseDown={header.getResizeHandler()}
-                            onTouchStart={header.getResizeHandler()}
+                            onClick={(event) => event.stopPropagation()}
+                            onMouseDown={(event) => {
+                              event.stopPropagation();
+                              header.getResizeHandler()(event);
+                            }}
+                            onTouchStart={(event) => {
+                              event.stopPropagation();
+                              header.getResizeHandler()(event);
+                            }}
                             sx={{
                               cursor: "col-resize",
                               position: "absolute",