style: 优化顺运宝列表筛选与滚动 (#216)

admin/static/css/app.css

@@ -112,6 +112,11 @@ body {
    用 flex 而不是 width：工具条是 flex 布局，width 会被 flex-grow 盖掉。
    min-width 由下面那条继承，窄屏时不会缩到没法输入。 */
 .toolbar input[type="text"].search-narrow { flex: 0 0 30%; }
+/* 顺运宝一行需要容纳两个搜索框和操作按钮，固定宽度比百分比更稳定。 */
+.toolbar input[type="text"].syb-search-input {
+  flex: 0 0 140px;
+  min-width: 140px;
+}
 /* 蝦皮工具条同时放商品和店铺两个搜索框，各占剩余工具条的约 20%。
    min-width 继续由通用输入框规则提供，窄窗口时交给工具条自然换行。 */
 .toolbar input[type="text"].shopee-search-field { flex: 0 1 20%; }
@@ -240,6 +245,30 @@ tr.empty small { color: #aaa; }
   text-overflow: ellipsis;
 }
 
+/* 顺运宝列很多：限制高频短字段宽度，并让表头和横向滚动条在浏览数据时
+   始终容易找到。syb_id 仍保留在复选框和详情入口中，不作为独立列展示。 */
+.syb-col-shop {
+  width: 224px;
+  max-width: 224px;
+}
+.syb-col-spec {
+  width: 140px;
+  max-width: 140px;
+}
+.syb-table-wrap {
+  max-height: calc(100vh - 270px);
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+.syb-table-wrap thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+@media (max-width: 760px) {
+  .syb-table-wrap { max-height: none; }
+}
+
 /* 蝦皮数据页商品名称列收窄，配合 .truncate 一起用（见工单 #214）。
    用独立类设 max-width，不用 flex——.search-narrow 那套是给工具条用的，
    表格单元格不是 flex 布局，flex 在这里不生效。放在 .truncate 之后，