X axis (horizontal) scroll and full width popover – the user cant change the language …

该问题出现在 LobeChat 把界面语言切换为 RTL(波斯语/阿拉伯语等)后,打开任务(task)/看板页面时出现多余的水平滚动条,并且全宽 popover 布局错位,导致语言切换菜单无法正常点击。优先排查方向是任务页在 RTL 模式下的横向溢出与 popover 定位逻辑。

快速结论:该问题出现在 LobeChat 把界面语言切换为 RTL(波斯语/阿拉伯语等)后,打开任务(task)/看板页面时出现多余的水平滚动条,并且全宽 popover 布局错位,导致语言切换菜单无法正常点击。优先排查方向是任务页在 RTL 模式下的横向溢出与 popover 定位逻辑。

适用环境:LobeChat 2.1.57(官方云版本)、Web 桌面端、Chrome 浏览器、Linux 系统。

最快修复方案:暂无确认的一步修复方案。该 Issue 被标记为 Duplicate,关闭时未给出已验证的修复;官方尚未合并针对该 RTL 布局问题的 PR。

注意事项:Issue 中提到的相关历史问题(#14107 等)也未被确认修复,因此不能保证切换回 LTR 语言之外的方案有效;下述步骤为可优先尝试的排查与规避手段,不代表官方确认结论。

问题场景

用户在 LobeChat 中创建任务后进入该任务页面(任务/看板视图)。当界面语言切换为波斯语、阿拉伯语或其他 RTL 语言时,页面出现不必要的水平(X 轴)滚动条;同时全宽形态的菜单 popover 布局错乱,语言切换菜单渲染位置异常,用户多次点击也无法打开或切换语言。

报错原文

X axis (horizontal) scroll and full width popover - the user cant change the language ...

when you create a task and heading to that page : that page has X scroll (horizontal) and its awful for production i think t have X scroll when its not needed.

another problem is the full width menu popover so. the UI is broken and also the user cant change the language even because we render that outside of page.

in the video below i click multiple time to open the languages but that doesn't work...

原因分析

根据 Issue 讨论,代码库本身已有 RTL 基础设施:应用会检测 RTL 语言并设置 document.documentElement.dir,任务/看板组件也使用了 padding-inline、overflow-x: auto 等逻辑 CSS 属性。但可能原因在于:任务页在方向翻转(RTL)后,横向溢出未被正确约束,导致 overflow-x: auto 产生多余的水平滚动条;同时全宽 popover 的定位未针对 RTL 方向做适配,渲染到页面外部,从而出现布局错位和点击无效。讨论指出这些 RTL 问题属于反复出现的区域(此前已有 #14107、#6016、#13588、#10494 等相关问题),且当时未找到已合并的修复 PR。

环境排查

  • 确认 LobeChat 版本是否与 Issue 一致(2.1.57 或更新版本)。
  • 确认界面语言是否为 RTL 语言(波斯语、阿拉伯语等)。
  • 确认浏览器为 Chrome,客户端类型为 Web 桌面端。
  • 确认是否在官方云部署或自托管部署下复现,用于区分是否为部署或缓存导致。
  • 确认问题是否只出现在任务/看板页面,还是其他页面也存在 RTL 横向溢出。

解决步骤

  1. 先在受影响页面用浏览器开发者工具检查是否存在横向溢出元素(查看 document.documentElement.dir 是否为 rtl,并定位触发水平滚动的容器)。
  2. 可优先尝试临时规避:将界面语言切换回 LTR 语言(如英文或中文),确认水平滚动条与 popover 错位是否消失,以确认问题与 RTL 方向绑定。
  3. 若为自托管部署,可优先尝试升级到包含最新 RTL 修复的 LobeChat 版本,并在升级后重新验证任务页表现;若为官方云版本,则等待官方修复。
  4. 关注并跟踪上游 RTL 相关问题(如 #14107 及本 Issue 的重复标记),确认是否有新的合并 PR 落地后再做验证。

验证方法

将界面语言切换为 RTL 语言后进入任务页面,确认页面不再出现水平(X 轴)滚动条;打开语言切换等 popover 菜单,确认布局宽度正常、可正常点击并完成语言切换。若上述现象均消失,则说明相关 RTL 布局问题已解决。

参考来源

lobehub/lobe-chat #14938

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 25858

发表回复

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