From 8575c8398041b21eab7dde0ebf613496a7f8c173 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 6 Sep 2026 04:58:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=BE=E6=8A=A5=E5=8E=9F?= =?UTF-8?q?=E5=9B=A0=E5=88=97=E8=A1=A8=E6=96=87=E6=A1=88=E8=A3=81=E5=88=87?= =?UTF-8?q?=E3=80=81=E4=B8=BE=E6=8A=A5=E8=AF=A6=E6=83=85=E9=A1=B5=E5=8E=9F?= =?UTF-8?q?=E5=9B=A0=E6=A0=87=E7=AD=BE=E6=8D=A2=E8=A1=8C=E9=94=99=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 两处grid都按"预留图标位"设计成3栏（2.7-2.8rem首列+内容+尾部），但 ReportReasons/ReportDetails实际渲染的都只是纯文字span，没有图标元素 ——真实文案被挤进过窄的图标列：举报原因列表里"诈骗欺诈"等文案裁切成 看不懂的碎片（部分文字还叠在蓝底图标框上导致白底白字不可见）；举报 详情页"举报原因"标签被挤到换行。改成按真实子元素数量分栏（2栏）。 第十二轮最小粒度测试 Ch10-11 发现。 Co-Authored-By: Claude Sonnet 5 --- css/base.css | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) 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;