From 3d75040297cb17f0eabb5109e11f0bf8e2cfb0cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= <hkdong@kland.com.cn>
Date: Sat, 20 Jun 2026 22:58:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(roundtable):=20=E4=BC=9A=E5=95=86=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E5=88=97=E8=A1=A8=E5=8F=AA=E7=AB=96=E5=90=91=E6=BB=9A?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E6=BB=91=E5=9D=97=E8=A2=AB=E6=A8=AA?=
 =?UTF-8?q?=E5=90=91=E6=8B=96=E5=8A=A8=E6=8A=A2=E5=8D=A0=E9=9A=BE=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

消息列表用 `overflow-y-auto` 单写时，按 CSS 规范另一轴(overflow-x)会被计算成
auto——任何子元素溢出一两像素就让整列横向可滚，鼠标移到右侧竖滚条滑块时极易误
触发横向拖动、抓不住滑块。给消息流容器补 `overflow-x-hidden` 只保留竖向滚动；
宽内容(代码块/表格)在各自气泡内已有 max-w-full + overflow-x-auto 自带横滚，裁掉
列表横向不影响查看。

覆盖 Step1/Step2(会商)/Step3 总结·报告·大屏 五处聊天消息流容器。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../roundtable-planning/components/DashboardChatPanel.tsx   | 2 +-
 .../src/roundtable-planning/components/Step1Panel.tsx       | 3 ++-
 .../src/roundtable-planning/components/Step2Panel.tsx       | 6 +++++-
 .../src/roundtable-planning/components/Step3ReportMode.tsx  | 2 +-
 .../src/roundtable-planning/components/Step3SummaryMode.tsx | 2 +-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend-web/src/roundtable-planning/components/DashboardChatPanel.tsx b/frontend-web/src/roundtable-planning/components/DashboardChatPanel.tsx
index b590c90e..2bffa930 100644
--- a/frontend-web/src/roundtable-planning/components/DashboardChatPanel.tsx
+++ b/frontend-web/src/roundtable-planning/components/DashboardChatPanel.tsx
@@ -156,7 +156,7 @@ export function DashboardChatPanel({
 
       {/* 聊天记录 */}
       <div className="relative flex-1 min-h-0 flex flex-col">
-        <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto p-4 space-y-4 bg-white">
+        <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-4 space-y-4 bg-white">
           {phase === "creating" && dialogues.length === 0 && (
             <div className="flex items-center gap-2 text-xs text-slate-500">
               <Loader2 className="w-3.5 h-3.5 animate-spin text-primary" />
diff --git a/frontend-web/src/roundtable-planning/components/Step1Panel.tsx b/frontend-web/src/roundtable-planning/components/Step1Panel.tsx
index ceb91abc..b75c4948 100644
--- a/frontend-web/src/roundtable-planning/components/Step1Panel.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step1Panel.tsx
@@ -181,7 +181,8 @@ export function Step1Panel(props: Step1PanelProps) {
       <div className="relative flex-1 min-h-0 flex flex-col font-normal">
         <div
           ref={step1ScrollRef}
-          className="flex-1 min-h-0 overflow-y-auto p-6 space-y-4 bg-white"
+          // overflow-x-hidden：消息列表只竖向滚（见 Step2Panel 同处注释），避免误触横向拖动抢滑块。
+          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-6 space-y-4 bg-white"
         >
           {interactiveMessages.map((msg) => (
             <Step1Message
diff --git a/frontend-web/src/roundtable-planning/components/Step2Panel.tsx b/frontend-web/src/roundtable-planning/components/Step2Panel.tsx
index 7ba30363..891050df 100644
--- a/frontend-web/src/roundtable-planning/components/Step2Panel.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step2Panel.tsx
@@ -551,7 +551,11 @@ export function Step2Panel(props: Step2PanelProps) {
         )}
         <div
           ref={step2ScrollRef}
-          className="flex-1 min-h-0 overflow-y-auto p-6 space-y-4 bg-white border-t border-slate-150 border-b border-slate-150 shadow-inner"
+          // overflow-x-hidden：消息列表只竖向滚。否则 `overflow-y-auto` 单写时按 CSS 规范
+          // 另一轴会被计算成 auto，任何子元素溢出一两像素都会让整列横向可滚 → 鼠标移到右侧
+          // 竖滚条滑块时极易误触发横向拖动、抓不住滑块。宽内容（代码块/表格）在各自气泡内
+          // 已有 max-w-full + overflow-x-auto 自带横滚，故此处裁掉横向不影响查看。
+          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-6 space-y-4 bg-white border-t border-slate-150 border-b border-slate-150 shadow-inner"
         >
           {isInitializing && step2RoundtableDialogues.length === 0 && (
             <div className="flex h-full flex-col items-center justify-center gap-3 py-12 text-slate-500">
diff --git a/frontend-web/src/roundtable-planning/components/Step3ReportMode.tsx b/frontend-web/src/roundtable-planning/components/Step3ReportMode.tsx
index b465d099..e91b3c6b 100644
--- a/frontend-web/src/roundtable-planning/components/Step3ReportMode.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step3ReportMode.tsx
@@ -592,7 +592,7 @@ function AgentProgressPanel({
       <div className="relative flex-1 min-h-0 flex flex-col">
         <div
           ref={scrollRef}
-          className="flex-1 min-h-0 overflow-y-auto p-4 space-y-4 bg-white"
+          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-4 space-y-4 bg-white"
         >
           {phase === "creating" && dialogues.length === 0 && (
             <div className="flex items-center gap-2 text-xs text-slate-500">
diff --git a/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx b/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
index e16151cf..5ad08e05 100644
--- a/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
@@ -707,7 +707,7 @@ function AgentProgressPanel({
 
       {/* 消息列表 —— 与第 2 步同款气泡（流式正文 + 工具步骤卡 + 文件卡）。 */}
       <div className="relative flex-1 min-h-0 flex flex-col">
-        <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto p-4 space-y-4 bg-white">
+        <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-4 space-y-4 bg-white">
           {phase === "creating" && dialogues.length === 0 && (
             <div className="flex items-center gap-2 text-xs text-slate-500">
               <Loader2 className="w-3.5 h-3.5 animate-spin text-primary" />