[Bug] 工具调用详情面板（技能状态 JSON 视图）宽度撑爆，右侧留白过大且无法滚动/复制

快速结论：该 Bug 发生在 LobeChat 工具调用详情面板的「技能状态」Tab 中，主要原因是 Highlighter 组件渲染的 <pre> 块未受外层容器宽度约束，且 Tabs panel 缺少 overflow 控制。优先排查 src/features/Conversation/Messages/AssistantGroup/Tool/Debug/index.tsx 中的 styles.panel 样式是否设置了 overflow 和宽度约束。

问题场景

用户在 LobeChat 中查看工具调用详情面板时，切换至「技能状态」Tab，JSON 内容展示区域出现布局异常：右侧有大片空白，内容无法滚动或复制。

报错原文

在工具调用详情面板的「技能状态」Tab 中，JSON 内容展示区域宽度异常：
- 宽度被撑爆，右侧出现一条贯穿整个高度的空白区域
- 内容区无法横向/纵向滚动
- 无法一键复制 JSON 内容（复制按钮位置异常）

原因分析

可能原因：Issue 评论区指出问题出在 Debug/index.tsx 中的 Highlighter 组件与 Tabs 面板的布局配合上。

当前 Tabs 的 panel 样式仅设置了 height: 300 和 padding: 0，但缺少对宽度和溢出（overflow）的控制。
Highlighter 组件设置了 height: '100%'，但没有限制宽度或启用 overflow scrolling。
Highlighter 渲染的 <pre> 块本身 overflow: visible，导致长 JSON 内容直接把容器撑爆。

环境排查

确认使用的 LobeChat 版本（该 Bug 出现在 2026 年 7 月 13 日已关闭的 Issue #17130 中）。
确认触发场景：工具调用详情面板 → 技能状态 Tab。
检查 Debug/index.tsx 中 styles.panel 的 CSS 属性。

解决步骤

注意：以下解决方案基于 Issue 评论区的推测，尚未确认最终修复代码，请优先尝试。

添加 overflow 控制：在 styles.panel 中设置 overflow: 'auto'（或分别设置 overflowX / overflowY），使内容超出时可滚动。
限制宽度：给 panel 添加 width: 0 + minWidth: '100%'（或 overflow: hidden on parent），或在 Highlighter 上设置 wordWrap / whiteSpace: 'pre-wrap' + overflowWrap: 'anywhere' 使长行换行。
修复复制按钮定位：确认 Highlighter 的 copyable 功能在受限容器中 sticky/fixed 定位正常，可能需要 position: sticky; right: 0; top: 0。

可参考之前 PR #15060 修复滚动条遮挡问题的思路，使用 disableContentFit + paddingInlineEnd 类似方法。

验证方法

修复后，在工具调用详情面板中切换至「技能状态」Tab，确认：

JSON 内容区域宽度不再被撑爆，右侧无异常留白。
内容超出时可正常横向/纵向滚动。
复制按钮悬浮定位正常，点击后可复制完整 JSON。

参考来源

lobehub/lobe-chat #17130 – [Bug] 工具调用详情面板（技能状态 JSON 视图）宽度撑爆，右侧留白过大且无法滚动/复制

[Bug] 工具调用详情面板（技能状态 JSON 视图）宽度撑爆，右侧留白过大且无法滚动/复制