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:
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;
|
||||
}
|
||||
Reference in new issue
Block a user