feat: enhance TOTP formatting and improve responsive styles for TOTP codes display

This commit is contained in:
shuaiplus
2026-06-16 19:17:05 +08:00
parent 7b3be2c819
commit 9e0908f43c
5 changed files with 55 additions and 14 deletions
+18
View File
@@ -681,6 +681,20 @@
gap: 10px;
}
.totp-codes-list {
grid-template-columns: 1fr;
}
.totp-code-row {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.totp-code-main {
justify-content: space-between;
width: 100%;
}
.totp-qr {
min-height: 180px;
}
@@ -892,6 +906,10 @@
font-size: 13px;
}
.totp-code-main strong {
font-size: 20px;
}
.settings-module .field,
.auth-card .field {
margin-bottom: 8px;
+2 -2
View File
@@ -952,7 +952,7 @@ select.input.duplicate-mode-toolbar-select {
.totp-codes-list {
@apply grid w-full items-start gap-2.5;
grid-template-columns: repeat(var(--totp-columns, 1), minmax(300px, 1fr));
grid-template-columns: repeat(var(--totp-columns, 1), minmax(0, 1fr));
}
.totp-code-row {
@@ -977,7 +977,7 @@ select.input.duplicate-mode-toolbar-select {
}
.totp-code-main strong {
@apply whitespace-nowrap text-[22px] leading-none;
@apply min-w-0 whitespace-nowrap text-[22px] leading-none;
letter-spacing: 0.04em;
}