diff --git a/css/base.css b/css/base.css index 6a9a293d..f3f4c4a8 100644 --- a/css/base.css +++ b/css/base.css @@ -14172,7 +14172,7 @@ div.toast.show { .report-reason-list button { display: grid; - grid-template-columns: 2.8rem minmax(0, 1fr) 1.5rem; + grid-template-columns: minmax(0, 1fr) 1.5rem; align-items: center; gap: 0.55rem; width: 100%; @@ -14188,17 +14188,17 @@ div.toast.show { text-align: left; } -.report-reason-list button > span:first-child { - display: grid; - place-items: center; - width: 2.5rem; - height: 2.5rem; - border-radius: 0.4rem; - color: #fff; - background: #4d70a8; -} - -.report-reason-list button > span:nth-child(2), +/* ReportReasons (security-support-view.jsx) renders each row as a single `label + ` followed by the trailing chevron -- there is no separate icon element, and + the reference design (docs/images/举报.png) confirms this list was never meant to carry a + per-row icon badge. This rule used to target that lone span as `span:first-child` with a fixed + 2.5rem blue square + white text (sized/colored for an icon glyph, not a 4-character label) -- + the 3-column grid above reserved a matching 2.8rem first column for it. With no icon in the + DOM, the real label text got force-fit into that narrow column: white-on-blue where it + overlapped the badge box, white-on-white (invisible) past its edge, so only a garbled sliver of + each reason's label was ever legible. Folded into the plain block/min-width:0 treatment below + (and the button grid down to 2 columns) so the label gets the full flexible column instead. */ +.report-reason-list button > span:first-child, .report-reason-list strong, .report-reason-list small { display: block; @@ -14223,9 +14223,15 @@ div.toast.show { padding-bottom: 1rem; } +/* Same collision as .report-reason-list above: ReportDetails renders this section as just + `{"举报原因"/reasonLabel}` -- two children, no leading icon -- + but the grid reserved a 2.7rem first column for one anyway (matching the now-unused + `.material-icons` rule below, presumably meant for some future/removed icon). With no icon + present, the label span itself was squeezed into that 36px column, wrapping "举报原因"/the + reason text onto multiple lines instead of the single flexible column it needs. */ .report-selected-reason { display: grid; - grid-template-columns: 2.7rem minmax(0, 1fr) auto; + grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem;