Make risk policy cards responsive with auto-fit grid layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-09 10:09:49 +08:00
parent 23ba725c89
commit f4361e3eeb
+36 -2
View File
@@ -2512,6 +2512,14 @@ html[data-theme="light"] .journal-detail-img-thumb {
/* ── 风控说明页 ── */
.risk-policy-page {
margin-top: 12px;
width: 100%;
min-width: 0;
}
.risk-policy-page .settings-card--risk {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.settings-page--grid {
@@ -2758,16 +2766,20 @@ html[data-theme="light"] .journal-detail-img-thumb {
.settings-risk-sections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 10px;
margin-top: 10px;
flex: 1;
align-items: start;
container-type: inline-size;
}
.settings-subcard {
padding: 10px 12px;
min-width: 0;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.settings-subcard-title {
@@ -2778,15 +2790,37 @@ html[data-theme="light"] .journal-detail-img-thumb {
}
.settings-kv--compact .settings-kv-row {
grid-template-columns: 8em 1fr;
grid-template-columns: minmax(7em, auto) minmax(0, 1fr);
gap: 6px 12px;
padding: 4px 0;
font-size: 0.75rem;
align-items: start;
}
@container (max-width: 420px) {
.settings-risk-sections .settings-kv--compact .settings-kv-row {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
.settings-risk-sections .settings-kv--compact .settings-kv-row dd {
margin-bottom: 6px;
}
}
@media (max-width: 720px) {
.settings-risk-sections {
grid-template-columns: minmax(0, 1fr);
}
.settings-kv--compact .settings-kv-row {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
.settings-kv--compact .settings-kv-row dd {
margin-bottom: 6px;
}
}
.settings-section {