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;