fix(roundtable): 修复会商消息列表滚动条被分栏手柄抢占、且过细难抓

- Step2/Step3 分栏拖拽手柄 ::after 命中区(16px,居中跨分隔线)向左探出 8px
  压住左侧消息列表纵向滚动条,抓滑块误触发左右拖动;改为命中区整体移到
  分隔线右侧(沙箱一侧),左侧滚动条让出
- 会商页滚动条 6px→12px(透明边框+background-clip 收成带内边距圆条),更易抓
- 覆盖 Step1/Step2/Step3(summary/report)所有消息列表,含有沙箱与流程图分栏场景

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
董宏凯andClaude Opus 4.8 committed 2026-06-21 00:42:40 +08:00
1 parent 5ae6261e82
commit 48744441ba
1 file changed
+35
@@ -556,3 +556,38 @@
.roundtable-planning--dark .custom-scrollbar-inner::-webkit-scrollbar-thumb {
background: color-mix(in oklch, var(--primary) 35%, var(--border));
}
/* =============================================================================
* 会商消息列表滚动条易用性修复(Step1/Step2/Step3 都受益)。
*
* 症状:鼠标移到右侧纵向滚动条滑块上特别容易触发「左右拖动」,导致点不到滑块。
*
* 根因 1(Step2/Step3 有沙箱/流程图分栏时):分栏拖拽手柄
* `#roundtable-step2-separator`(react-resizable-panels Separator)默认命中区是
* `::after { left:50%; width:16px; transform:translateX(-50%) }`——居中跨在分隔线
* 上、向左探出 8px,正好压住左侧消息列表那条贴右边的纵向滚动条。于是抓滚动条时
* 实际抓到了 `cursor-col-resize` 的手柄命中区 → 误触发左右拖动、点不到滑块。
* 修法:把命中区整体挪到分隔线**右侧(沙箱一侧)**,左侧滚动条彻底让出。
* ID 选择器特异性(1,0,1) 高于 Tailwind 的 `after:*` 工具类(0,1,1),无视加载顺序生效。
*
* 根因 2(所有步骤通用):默认滚动条只有 6px,太细难抓。仅在 .roundtable-planning
* 作用域内加宽到 12px,并用「透明边框 + background-clip:padding-box」把可见滑块收
* 成带内边距的圆条(更像可抓的条,而非贴边细线),命中区仍是整 12px。
* ========================================================================== */
#roundtable-step2-separator::after {
left: 0;
right: auto;
width: 14px;
transform: none;
}
.roundtable-planning ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.roundtable-planning ::-webkit-scrollbar-thumb {
border: 3px solid transparent;
background-clip: padding-box;
border-radius: 9999px;
}