修复举报原因列表文案裁切、举报详情页原因标签换行错位

两处grid都按"预留图标位"设计成3栏（2.7-2.8rem首列+内容+尾部），但
ReportReasons/ReportDetails实际渲染的都只是纯文字span，没有图标元素
——真实文案被挤进过窄的图标列：举报原因列表里"诈骗欺诈"等文案裁切成
看不懂的碎片（部分文字还叠在蓝底图标框上导致白底白字不可见）；举报
详情页"举报原因"标签被挤到换行。改成按真实子元素数量分栏（2栏）。

第十二轮最小粒度测试 Ch10-11 发现。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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 `<span><strong>label
+   </strong></span>` 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
+   `<span>{"举报原因"/reasonLabel}</span><button>修改</button>` -- 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;