bug: comment window doesn’t fit screen

问题场景

在 Langfuse 的 Trace 评审（Trace review）界面，点击“添加评论”（Add comment）按钮后，弹出的评论窗口在垂直方向上超出屏幕可视区域。当评论内容较多或屏幕分辨率/缩放比不理想时，弹窗底部的确认按钮（“回车”发送）位于屏幕之外，用户无法通过点击或快捷键提交评论。用户必须手动调高屏幕垂直分辨率才能继续操作，但重新打开弹窗后该问题依旧存在。

报错原文

bug: comment window doesn't fit screen

（具体表现为：Comment window bigger than screen vertical size. I cannot accept the comment (Enter button outside screen).）

原因分析

可能原因：

• 前端 CSS 布局缺陷：评论弹窗的高度未做最大高度限制（如 max-height），也未在内容溢出时启用内部滚动条，导致弹窗随内容增高并超出视口。
• 屏幕适配逻辑不健壮：弹窗定位可能基于固定像素值或未考虑浏览器窗口缩放，导致在不同分辨率或缩放比例下弹窗偏移至视口之外。
• 浏览器缩放干扰：用户操作系统或浏览器的显示缩放设置（如 125%、150%）可能放大了弹窗的实际渲染尺寸，超出视口可见范围。

注意：Issue 讨论中开发者确认“此 bug 应该已被修复”，但未给出底层根因分析，因此以上内容主要为经验性推测。

环境排查

• 确认 Langfuse 当前版本是否为最新（若为自托管，需检查 Docker 镜像版本；若为 Cloud，无需操作版本号）。
• 浏览器：检查缩放比例是否为 100%，尝试临时重置为 100% 并刷新页面。
• 操作系统：检查系统显示缩放（如 Windows 的“更改文本、应用等项目的大小”），尝试切换为推荐值或 100%。
• 检查浏览器控制台（Console）是否有 CSS 相关的报错或拒绝加载的样式资源。

解决步骤

1. 升级并清理缓存（首选验证方案）：确认 Langfuse 已更新至最新版本（Issue 中开发者声明已修复，该修复随版本发布）。清除浏览器缓存和 Cookie，或使用无痕模式重新打开 Langfuse。
2. 调整浏览器/系统缩放：临时将浏览器缩放比例重置为 100%（快捷键 Ctrl+0 或 Cmd+0）。若仍无效，检查操作系统显示缩放设置，将其调整为 100% 后重试。
3. 尝试键盘操作：如果按钮不可见，可点击弹窗输入框后按 Enter 键，或按 Tab 键遍历焦点至提交按钮后点击。这属于规避操作，可临时验证评论功能是否正常（证明后端提交逻辑无问题）。可优先尝试此项进行快速排查。
4. 调整浏览器窗口比例：尝试将浏览器窗口拉大或进入全屏模式（F11），增大视口高度，看是否能露出底部按钮。
5. 若上述均无效：在 Langfuse 新版本下仍可复现时，建议在官方 GitHub 提交新 Issue（附上浏览器控制台截图及操作系统/浏览器版本），以获取进一步支持。

验证方法

在 Trace 详情页点击“Add comment”，输入多行文本（模拟较长内容）后，检查底部“提交/发送”按钮是否完整显示于视口内且可点击。若能正常提交，且调整浏览器窗口大小或缩放比例后弹窗均未超出屏幕边界，则说明问题已解决。

参考来源

langfuse/langfuse #12584 bug: comment window doesn’t fit screen