diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css index 291b9c22..833288c2 100644 --- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css +++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css @@ -24,7 +24,28 @@ .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: flex-start; justify-content: space-between; gap: 16px; } +.security-key-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } +.security-key-header > .section-actions { + display: flex; + flex: 0 0 auto; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + align-content: center; + justify-content: flex-end; + gap: 8px; + margin: 0; +} +.security-key-header > .section-actions :deep(.el-button) { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-height: 32px; + margin: 0; + line-height: 1.25; + vertical-align: middle; +} .security-alert { margin-bottom: 18px; } .external-email-header { display: flex; @@ -55,6 +76,7 @@ gap: 16px; } .security-key-header, .credential-item, .external-email-header, .external-item { 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; } }