fix(connections): align detail actions in narrow layouts

Changelog.md

@@ -37,6 +37,7 @@
 - 修复断开链式代理时清空已选节点，导致再次连接需要重新选择
 - 修复「连接」页表格排序时表头换行、标题位置跳动
 - 修复「TUN 设置」未手动保存时，界面显示的默认 MTU 1500 未生效
+- 修复连接详情较窄时操作按钮偏离右侧
 
 **🍎 macOS**
 

src/components/connection/connection-detail.tsx

@@ -41,12 +41,15 @@ export function ConnectionDetail({ ref }: { ref?: Ref<ConnectionDetailRef> }) {
       onClose={onClose}
       sx={{
         '.MuiSnackbarContent-root': {
-          maxWidth: '520px',
+          width: '520px',
+          maxWidth: 'calc(100vw - 32px)',
+          boxSizing: 'border-box',
           maxHeight: '480px',
           overflowY: 'auto',
           backgroundColor: theme.palette.background.paper,
           color: theme.palette.text.primary,
         },
+        '.MuiSnackbarContent-message': { width: '100%', minWidth: 0 },
       }}
       message={
         detail ? (
@@ -132,7 +135,14 @@ const InnerConnectionDetail = ({ data, closed, onClose }: InnerProps) => {
   const onDelete = useLockFn(async () => closeConnection(data.id))
 
   return (
-    <Box sx={{ userSelect: 'text', color: theme.palette.text.secondary }}>
+    <Box
+      sx={{
+        width: '100%',
+        minWidth: 0,
+        userSelect: 'text',
+        color: theme.palette.text.secondary,
+      }}
+    >
       {information.map((each) => (
         <div key={each.label}>
           <b>{each.label}</b>
@@ -148,7 +158,15 @@ const InnerConnectionDetail = ({ data, closed, onClose }: InnerProps) => {
       ))}
 
       {!closed && (
-        <Box sx={{ textAlign: 'right' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 1,
+            flexWrap: 'wrap',
+            mt: 1,
+          }}
+        >
           <Button
             variant="contained"
             title={t('connections.components.actions.closeConnection')}