xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

修复安全码按钮横向居中布局
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source
This commit is contained in:
smail 2026-10-16 06:52:40 +08:00
parent 313c29a29d
commit 6048154786
1 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/views/components/SecuritySettings/SecuritySettings.css
View File

@ -344,3 +344,42 @@
justify-content: flex-start !important;
}
}
/* 非移动端保持标题、说明和安全码操作按钮同一行对齐。 */
@media (min-width: 768px) {
.security-settings-card .security-key-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.security-settings-card .security-key-header > .security-recovery-actions {
align-self: center;
justify-self: end;
width: max-content;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 2px;
}
}
/* 移动端按钮区域独占一行，避免标题和按钮互相挤压。 */
@media (max-width: 767px) {
.security-settings-card .security-key-header {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.security-settings-card .security-key-header > .security-recovery-actions {
align-self: stretch;
justify-content: flex-start !important;
width: 100%;
max-width: 100%;
overflow-x: auto;
padding-bottom: 0;
}
}