From 6f2f7fdc5006d2267302ecad61eb9f2432ffd23d Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Fri, 16 Oct 2026 04:00:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=89=E5=85=A8=E7=A0=81?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8D=95=E8=A1=8C=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SecuritySettings/SecuritySettings.css        | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
index 833288c..85ca06b 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
@@ -24,16 +24,22 @@
 .submit-btn { border-radius: var(--pm-radius-sm); font-weight: 500; }
 .submit-btn { padding: 10px 24px; }
 .settings-divider { margin: 32px 0; border-color: var(--pm-border-color); }
-.security-key-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.security-key-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+}
 .security-key-header > .section-actions {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   align-content: center;
   justify-content: flex-end;
-  gap: 8px;
+  gap: 6px;
+  min-width: max-content;
   margin: 0;
 }
 .security-key-header > .section-actions :deep(.el-button) {
@@ -43,7 +49,9 @@
   box-sizing: border-box;
   min-height: 32px;
   margin: 0;
+  padding: 8px 10px;
   line-height: 1.25;
+  white-space: nowrap;
   vertical-align: middle;
 }
 .security-alert { margin-bottom: 18px; }
@@ -75,7 +83,7 @@
       "main";
     gap: 16px;
   }
-  .security-key-header, .credential-item, .external-email-header, .external-item { flex-direction: column; align-items: stretch; }
+  .security-key-header, .credential-item, .external-email-header, .external-item { display: flex; flex-direction: column; align-items: stretch; }
   .security-key-header > .section-actions { width: 100%; justify-content: flex-start; }
   .credential-actions { width: 100%; }
   .credential-actions .el-button { flex: 1; }