diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
index 5bcb55d..97ef508 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
@@ -113,7 +113,17 @@
       "main";
     gap: 16px;
   }
-  .security-key-header, .credential-item, .external-email-header, .external-item { display: flex; flex-direction: column; align-items: stretch; }
+  .credential-item, .external-email-header, .external-item { display: flex; flex-direction: column; align-items: stretch; }
+  .credential-actions { width: 100%; }
+  .credential-actions .el-button { flex: 1; }
+}
+@media (max-width: 767px) {
+  .security-key-header {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .security-key-header > .section-actions {
     width: 100%;
     min-width: 0;
@@ -121,8 +131,6 @@
     overflow-x: auto;
     padding-bottom: 2px;
   }
-  .credential-actions { width: 100%; }
-  .credential-actions .el-button { flex: 1; }
 }
 .password-verification-row {
   display: flex;
diff --git a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css
index 314bcd7..0ad96b3 100644
--- a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css
+++ b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css
@@ -106,6 +106,13 @@
   vertical-align: middle;
 }
 
+:global(.recovery-code-dialog .el-dialog__footer) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  box-sizing: border-box;
+}
 .recovery-dialog-actions :deep(.el-button + .el-button) {
   margin-left: 0;
 }