From 082badb67aa95d953c474a2d4c286a96847180db Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Fri, 16 Oct 2026 12:01:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=AA=8C=E8=AF=81=E7=A0=81?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=EF=BC=9A=E7=94=B5?=
 =?UTF-8?q?=E8=84=91=E7=AB=AF=E5=8D=95=E8=A1=8C=E3=80=81=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=AB=AF=E4=B8=A4=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LoginVerification/LoginVerification.css   | 45 ++++++++----
 .../PasswordRecovery/PasswordRecovery.css     | 70 +++++++++----------
 .../PublicPasswordReset.css                   | 47 ++++++++-----
 .../ExternalEmailBindingDialog.css            | 45 ++++++++----
 .../SecuritySettings/SecuritySettings.css     | 45 ++++++++----
 .../TOTPSettings/TOTPSettings.css             | 53 +++++++++-----
 .../UserExternalEmailDialog.css               | 45 ++++++++----
 7 files changed, 220 insertions(+), 130 deletions(-)

diff --git a/frontend/src/views/LoginVerification/LoginVerification.css b/frontend/src/views/LoginVerification/LoginVerification.css
index 2f1b6218..a833909d 100644
--- a/frontend/src/views/LoginVerification/LoginVerification.css
+++ b/frontend/src/views/LoginVerification/LoginVerification.css
@@ -203,22 +203,37 @@
   }
 }
 
-.verification-form :deep(.el-form-item:has(.verification-input)) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
+@media (min-width: 761px) {
+  .verification-form :deep(.el-form-item:has(.verification-input)) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px;
+  }
+
+  .verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__label) {
+    width: auto !important;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__content) {
+    min-width: 0;
+    margin-left: 0 !important;
+  }
 }
 
-.verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__label) {
-  width: auto !important;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-}
+@media (max-width: 760px) {
+  .verification-form :deep(.el-form-item:has(.verification-input)) {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
 
-.verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__content) {
-  min-width: 0;
-  margin-left: 0 !important;
+  .verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__label) {
+    margin-bottom: 6px !important;
+    line-height: 1.4;
+  }
 }
diff --git a/frontend/src/views/PasswordRecovery/PasswordRecovery.css b/frontend/src/views/PasswordRecovery/PasswordRecovery.css
index 08c187db..8ce8d1ba 100644
--- a/frontend/src/views/PasswordRecovery/PasswordRecovery.css
+++ b/frontend/src/views/PasswordRecovery/PasswordRecovery.css
@@ -539,42 +539,42 @@
   }
 }
 
-.recovery-form :deep(.el-form-item:has(.verification-code-row)) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
+@media (min-width: 761px) {
+  .recovery-form :deep(.el-form-item:has(.verification-code-row)),
+  .recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px;
+  }
+
+  .recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__label),
+  .recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
+    width: auto !important;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__content),
+  .recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
+    min-width: 0;
+    margin-left: 0 !important;
+  }
 }
 
-.recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__label) {
-  width: auto !important;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-}
+@media (max-width: 760px) {
+  .recovery-form :deep(.el-form-item:has(.verification-code-row)),
+  .recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
 
-.recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__content) {
-  min-width: 0;
-  margin-left: 0 !important;
-}
-
-.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
-}
-
-.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
-  width: auto !important;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-}
-
-.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
-  min-width: 0;
-  margin-left: 0 !important;
+  .recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__label),
+  .recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
+    margin-bottom: 6px !important;
+    line-height: 1.4;
+  }
 }
diff --git a/frontend/src/views/PublicPasswordReset/PublicPasswordReset.css b/frontend/src/views/PublicPasswordReset/PublicPasswordReset.css
index 3d27c484..6415c9f8 100644
--- a/frontend/src/views/PublicPasswordReset/PublicPasswordReset.css
+++ b/frontend/src/views/PublicPasswordReset/PublicPasswordReset.css
@@ -256,24 +256,37 @@ button:not(:disabled):hover {
   }
 }
 
-.public-recovery-form:has(.recovery-code-row) {
-  grid-template-columns: auto minmax(0, 1fr);
+@media (min-width: 761px) {
+  .public-recovery-form:has(.recovery-code-row) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .public-recovery-form:has(.recovery-code-row) > strong,
+  .public-recovery-form:has(.recovery-code-row) > .public-recovery-copy,
+  .public-recovery-form:has(.recovery-code-row) > .recovery-methods,
+  .public-recovery-form:has(.recovery-code-row) > .public-recovery-status,
+  .public-recovery-form:has(.recovery-code-row) > .public-recovery-actions {
+    grid-column: 1 / -1;
+  }
+
+  .public-recovery-form:has(.recovery-code-row) > label[for="public-recovery-code"] {
+    align-self: center;
+    margin-top: 0;
+    white-space: nowrap;
+  }
+
+  .public-recovery-form:has(.recovery-code-row) > .recovery-code-row {
+    min-width: 0;
+  }
 }
 
-.public-recovery-form:has(.recovery-code-row) > strong,
-.public-recovery-form:has(.recovery-code-row) > .public-recovery-copy,
-.public-recovery-form:has(.recovery-code-row) > .recovery-methods,
-.public-recovery-form:has(.recovery-code-row) > .public-recovery-status,
-.public-recovery-form:has(.recovery-code-row) > .public-recovery-actions {
-  grid-column: 1 / -1;
-}
+@media (max-width: 760px) {
+  .public-recovery-form:has(.recovery-code-row) {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
 
-.public-recovery-form:has(.recovery-code-row) > label[for="public-recovery-code"] {
-  align-self: center;
-  margin-top: 0;
-  white-space: nowrap;
-}
-
-.public-recovery-form:has(.recovery-code-row) > .recovery-code-row {
-  min-width: 0;
+  .public-recovery-form:has(.recovery-code-row) > label[for="public-recovery-code"] {
+    margin-top: 6px;
+    margin-bottom: 2px;
+  }
 }
diff --git a/frontend/src/views/components/SecuritySettings/ExternalEmailBindingDialog/ExternalEmailBindingDialog.css b/frontend/src/views/components/SecuritySettings/ExternalEmailBindingDialog/ExternalEmailBindingDialog.css
index dcc8c977..ab71146b 100644
--- a/frontend/src/views/components/SecuritySettings/ExternalEmailBindingDialog/ExternalEmailBindingDialog.css
+++ b/frontend/src/views/components/SecuritySettings/ExternalEmailBindingDialog/ExternalEmailBindingDialog.css
@@ -77,22 +77,37 @@
   }
 }
 
-.external-email-verification :deep(.el-form-item) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
+@media (min-width: 761px) {
+  .external-email-verification :deep(.el-form-item) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px;
+  }
+
+  .external-email-verification :deep(.el-form-item__label) {
+    width: auto !important;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .external-email-verification :deep(.el-form-item__content) {
+    min-width: 0;
+    margin-left: 0 !important;
+  }
 }
 
-.external-email-verification :deep(.el-form-item__label) {
-  width: auto !important;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-}
+@media (max-width: 760px) {
+  .external-email-verification :deep(.el-form-item) {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
 
-.external-email-verification :deep(.el-form-item__content) {
-  min-width: 0;
-  margin-left: 0 !important;
+  .external-email-verification :deep(.el-form-item__label) {
+    margin-bottom: 6px !important;
+    line-height: 1.4;
+  }
 }
diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
index c1088db3..bcad2eb2 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
@@ -231,24 +231,39 @@
   }
 }
 
-.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
+@media (min-width: 761px) {
+  .security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px;
+  }
+
+  .security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
+    width: auto !important;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
+    min-width: 0;
+    margin-left: 0 !important;
+  }
 }
 
-.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
-  width: auto !important;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-}
+@media (max-width: 760px) {
+  .security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
 
-.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
-  min-width: 0;
-  margin-left: 0 !important;
+  .security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
+    margin-bottom: 6px !important;
+    line-height: 1.4;
+  }
 }
 
 .security-settings-card .security-key-header {
diff --git a/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css b/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
index 2a84edfc..73e54123 100644
--- a/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
+++ b/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
@@ -70,25 +70,42 @@
   max-width: 360px;
 }
 
-.totp-enrollment :deep(.el-form-item),
-.totp-disable :deep(.el-form-item) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
+@media (min-width: 761px) {
+  .totp-enrollment :deep(.el-form-item),
+  .totp-disable :deep(.el-form-item) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px;
+  }
+
+  .totp-enrollment :deep(.el-form-item__label),
+  .totp-disable :deep(.el-form-item__label) {
+    width: auto !important;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .totp-enrollment :deep(.el-form-item__content),
+  .totp-disable :deep(.el-form-item__content) {
+    min-width: 0;
+    margin-left: 0 !important;
+  }
 }
 
-.totp-enrollment :deep(.el-form-item__label),
-.totp-disable :deep(.el-form-item__label) {
-  width: auto !important;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-}
+@media (max-width: 760px) {
+  .totp-enrollment :deep(.el-form-item),
+  .totp-disable :deep(.el-form-item) {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
 
-.totp-enrollment :deep(.el-form-item__content),
-.totp-disable :deep(.el-form-item__content) {
-  min-width: 0;
-  margin-left: 0 !important;
+  .totp-enrollment :deep(.el-form-item__label),
+  .totp-disable :deep(.el-form-item__label) {
+    margin-bottom: 6px !important;
+    line-height: 1.4;
+  }
 }
diff --git a/frontend/src/views/components/UserManagement/UserExternalEmailDialog/UserExternalEmailDialog.css b/frontend/src/views/components/UserManagement/UserExternalEmailDialog/UserExternalEmailDialog.css
index d59c4a83..433d4ebd 100644
--- a/frontend/src/views/components/UserManagement/UserExternalEmailDialog/UserExternalEmailDialog.css
+++ b/frontend/src/views/components/UserManagement/UserExternalEmailDialog/UserExternalEmailDialog.css
@@ -99,22 +99,37 @@
   }
 }
 
-.external-email-verification :deep(.el-form-item) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
+@media (min-width: 761px) {
+  .external-email-verification :deep(.el-form-item) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px;
+  }
+
+  .external-email-verification :deep(.el-form-item__label) {
+    width: auto !important;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .external-email-verification :deep(.el-form-item__content) {
+    min-width: 0;
+    margin-left: 0 !important;
+  }
 }
 
-.external-email-verification :deep(.el-form-item__label) {
-  width: auto !important;
-  margin: 0;
-  padding: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-}
+@media (max-width: 760px) {
+  .external-email-verification :deep(.el-form-item) {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
 
-.external-email-verification :deep(.el-form-item__content) {
-  min-width: 0;
-  margin-left: 0 !important;
+  .external-email-verification :deep(.el-form-item__label) {
+    margin-bottom: 6px !important;
+    line-height: 1.4;
+  }
 }