bug: Large row height does not display full Input/Output text in Tracing table

在 Langfuse Tracing 列表把 Row height 设为 Large 后,行虽然变高,但 Input/Output 文本仍被截断、无法占满行高,这通常属于前端表格组件的 CSS 高度传递问题;优先排查 DataTable 单元格中间包裹层是否正确继承行高。

快速结论:在 Langfuse Tracing 列表把 Row height 设为 Large 后,行虽然变高,但 Input/Output 文本仍被截断、无法占满行高,这通常属于前端表格组件的 CSS 高度传递问题;优先排查 DataTable 单元格中间包裹层是否正确继承行高。

适用环境:Issue 中确认的环境为 Langfuse Cloud;浏览器为 Zen Browser 1.21.8b(Firefox 152.0.6)。报告者说明这是前端 UI 问题,与 SDK/集成版本无关;未提供自托管版本、Python、CUDA、显卡等信息。

最快修复方案:暂无确认的一步修复方案。Issue 中给出的方向是:为 data-table.tsx 中包裹字符串单元格的内层 div 补上 rowheighttw 类(或等价的显式 height/max-height),使其正确继承外部 flex 容器的行高。该结论来自 Issue 评论推测,Issue 本身标记为 unconfirmed bug,未确认已被验证修复。

注意事项:上述修复仅为可能原因与可优先尝试的排查方向,未在 Issue 中确认合入或验证;修改前需确认当前代码版本对应文件行号是否一致,避免直接套用行号。该问题仅影响前端显示,不影响数据存储与 SDK 上报。

问题场景

用户在 Langfuse Tracing(追踪)页面查看包含较长 Input 或 Output 值的 trace 时,打开 Row height(行高)菜单并选择 Large,期望表格行能显示更多 Input/Output 文本内容。实际行高度确实增加,但文本仍被截断,行内出现大量空白区域,无法在表格中直接查看完整内容。

报错原文

bug: Large row height does not display full Input/Output text in Tracing table

Only a small part of the content is displayed, while most of the row remains empty.

原因分析

可能原因是 DataTable 组件中的 CSS 高度传递问题。行高类(Medium 对应 h-24,Large 对应 h-64)被应用在单元格包裹层的外层 flex div 上,而包裹字符串单元格(含 Input/Output)的内层 div 使用了 h-full,但未能正确继承显式高度,导致 IO 内容无法撑满可用空间。

根据 Issue 评论,Input/Output 列本身已能在 Medium/Large 行高下从单行切换为多行模式,IOTableCell 也使用了 h-full 填充容器,问题出在中间包裹层(data-table.tsx 约 599 行附近的 div)。

环境排查

  • 确认使用的部署方式:Langfuse Cloud(Issue 中确认)还是自托管。
  • 确认浏览器及版本,Issue 中为 Zen Browser 1.21.8b(Firefox 152.0.6)。
  • 确认 Langfuse 前端代码版本,以核对 data-table.tsxIOTableCell.tsx 中相关行号是否一致。
  • 确认触发条件的 trace 确实包含较长的 Input 或 Output 值,且行高已切换为 Large。
  • Python、CUDA、PyTorch、显卡等与前端 UI 问题无关,Issue 中也未提供相关版本信息。

解决步骤

  1. 在 Tracing 页面复现问题:找到包含长 Input/Output 的 trace,将 Row height 切换为 Large,确认文本仍被截断、行内存在空白。
  2. 定位前端代码 web/src/components/table/data-table.tsx,查看单元格包裹层结构,确认外层 flex div 上应用了 h-24(Medium)或 h-64(Large)。
  3. 检查内层包裹字符串单元格的 div(约 599 行附近),其当前类似:
    <div className="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden text-ellipsis">
  4. 可优先尝试:为该内层包裹 div 补上 rowheighttw 类,或添加等价的显式 height/max-height,使 IO 内容能正确继承外部行高。
  5. 保存后刷新 Tracing 页面,重新选择 Large 行高进行验证。

验证方法

在 Tracing 页面选择一个包含长 Input/Output 值的 trace,将 Row height 设为 Large,确认 Input/Output 文本能够扩展到多行并占满整行高度,不再出现文本截断与大面积空白。若文本仍被截断,说明高度传递问题未解决,需要继续检查中间包裹层的样式继承链。

参考来源

langfuse/langfuse #15566

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 24728

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注