style: 蝦皮商品名称列再收窄到 18% (#41)

30% → 18%（初版的六成）。蝦皮标题普遍很长，实测最长 60+ 字且全是
关键词堆砌，不收窄的话这一列会把后面的颜色/尺码/SKU/待补几个数字
挤出屏幕——而那几个数字才是这个页面要看的东西。

数值只写在 app.css 一处，模板注释不再重复具体百分比，
免得下次改了数值忘了同步注释。title 属性保留，悬停看完整标题。

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

admin/static/css/app.css

@@ -151,12 +151,17 @@ tr.empty small { color: #aaa; }
   text-overflow: ellipsis;
 }
 
-/* 蝦皮数据页商品名称列收窄到 30%，配合 .truncate 一起用（见工单 #41）。
+/* 蝦皮数据页商品名称列收窄，配合 .truncate 一起用（见工单 #41）。
    用独立类设 max-width，不用 flex——.search-narrow 那套是给工具条用的，
    表格单元格不是 flex 布局，flex 在这里不生效。放在 .truncate 之后，
-   同优先级下按 CSS 层叠顺序覆盖 .truncate 的 280px。 */
+   同优先级下按 CSS 层叠顺序覆盖 .truncate 的 280px。
+
+   18% = 初版 30% 的六成。蝦皮标题普遍很长（实测最长 60+ 字，
+   全是关键词堆砌），不收窄的话这一列会把后面的颜色/尺码/SKU/待补
+   几个关键数字挤出屏幕——而那几个数字才是这个页面要看的东西。
+   完整标题靠悬停的 title 属性看。 */
 .col-title {
-  max-width: 30%;
+  max-width: 18%;
 }
 
 /* ── 弹窗 ─────────────────────────────── */

admin/templates/shopee/list.html

@@ -57,8 +57,9 @@
     <tr data-detail-id="{{.GoodsID}}"{{if gt .PendingCount 0}} class="row-warn"{{end}}>
       <td class="col-check"><input type="checkbox" name="ids" value="{{.GoodsID}}"></td>
       <td>{{.GoodsID}}</td>
-      {{/* 商品名称列收窄到 30%，用独立的 .col-title 类设 max-width，
-           不用 flex——表格单元格和工具条的 .search-narrow 那套不一样，见 #41。 */}}
+      {{/* 商品名称列收窄，用独立的 .col-title 类设 max-width（具体数值见 app.css），
+           不用 flex——表格单元格和工具条的 .search-narrow 那套不一样，见 #41。
+           title 属性让悬停能看完整标题，收窄之后必须留着。 */}}
       <td class="truncate col-title" title="{{.Title}}">{{.Title}}</td>
       <td>{{.ColorCount}}</td>
       <td>{{.SizeCount}}</td>