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 { .risk-policy-page {
margin-top: 12px; 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 { .settings-page--grid {
@@ -2758,16 +2766,20 @@ html[data-theme="light"] .journal-detail-img-thumb {
.settings-risk-sections { .settings-risk-sections {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 10px; gap: 10px;
margin-top: 10px; margin-top: 10px;
flex: 1; flex: 1;
align-items: start;
container-type: inline-size;
} }
.settings-subcard { .settings-subcard {
padding: 10px 12px; padding: 10px 12px;
min-width: 0; min-width: 0;
margin: 0; margin: 0;
width: 100%;
box-sizing: border-box;
} }
.settings-subcard-title { .settings-subcard-title {
@@ -2778,15 +2790,37 @@ html[data-theme="light"] .journal-detail-img-thumb {
} }
.settings-kv--compact .settings-kv-row { .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; padding: 4px 0;
font-size: 0.75rem; 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) { @media (max-width: 720px) {
.settings-risk-sections { .settings-risk-sections {
grid-template-columns: minmax(0, 1fr); 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 { .settings-section {