issue: docx and pptx file previews overflow the modal, controls scroll away and slides open below the fold

该问题出现在 Open WebUI 文件模态框的 Preview 标签页中,DOCX 和 PPTX 预览内容溢出模态框,导致缩放控件、幻灯片导航和当前幻灯片超出可视区域。优先检查预览根容器的 height 是否被正确约束,以及内部滚动容器是否因父级高度未定义而无法触发滚动。

快速结论:该问题出现在 Open WebUI 文件模态框的 Preview 标签页中,DOCX 和 PPTX 预览内容溢出模态框,导致缩放控件、幻灯片导航和当前幻灯片超出可视区域。优先检查预览根容器的 height 是否被正确约束,以及内部滚动容器是否因父级高度未定义而无法触发滚动。

适用环境:Open WebUI dev 分支(commit 7229fac0c),Docker :dev 镜像或 Git Clone 开发版;Linux 操作系统;Chromium 内核浏览器(布局问题,非浏览器特定)。

最快修复方案:暂无确认的一步修复方案。Issue 已确认问题存在并标记为 bug,但讨论中未提供已验证的补丁或 workaround。

注意事项:Issue 正文详细测量了布局参数,但未给出明确修复代码。相关 Issue #28563 涉及同一 PPTX 预览路径下的空白主面板问题,可能关联同一布局缺陷。

问题场景

在 Open WebUI 聊天界面中,点击文件卡片打开模态框,切换到「Preview」标签页查看多页 DOCX 或 PPTX 文件时触发。DOCX 预览的缩放控件(-/N%/+)会随文档滚动而移出视野;PPTX 预览的首张幻灯片出现在折叠线以下,导航按钮和缩放控件沉底,缩略图轨道无法内部滚动。

报错原文

issue: docx and pptx file previews overflow the modal, controls scroll away and slides open below the fold

The preview frame never gets a definite height, so nothing inside it can scroll and the modal body scrolls the entire preview instead.

DOCX: the preview root is capped at 367px (60vh) but holds 4642px of visibly overflowing content; the inner `overflow-auto` container is fully grown (scrollHeight equals clientHeight at 4642px) so it never scrolls.

PPTX: the preview root computes to 1708px tall (the full height of a 24 thumbnail rail) instead of 367px; the slide's top edge sits at 761px, past the 612px viewport; the controls sit at 1813px.

原因分析

可能原因:DOCX 和 PPTX 预览组件均构建为 relative 定位的框架,内部使用 overflow-auto 滚动容器,并将叠加控件设置为 absolute bottom-3。这种布局要求框架必须有确定的(definite)高度,但实际运行时两个预览的根容器均未获得限定高度:DOCX 的根容器被 60vh 上限约束,但内部滚动容器高度膨胀至内容全高,导致滚动失效;PPTX 的根容器高度直接等于缩略图轨道总高(如 1708px),而非视口内的期望高度(367px)。两个组件各自有不同原因导致未收到明确高度,但共同结果是模态框 body 成为唯一滚动容器,破坏了预期的内部滚动和控件锚定。

环境排查

  • Open WebUI 版本:dev @ 7229fac0c(Issue 发布时确认复现)
  • 安装方式:Docker :dev 镜像、Git Clone dev 分支
  • 操作系统:Linux
  • 浏览器:Chromium 内核(布局问题,跨浏览器存在)
  • 测试条件:612px 高的视口;PPTX 需约 8 张以上幻灯片使缩略图轨道超过模态框高度

解决步骤

  1. 在 Open WebUI 的 dev 分支上检查 FileItemModal 组件中 DOCX/PPTX 预览的 CSS 类名,定位预览根容器的 height 计算逻辑。
  2. 检查 DOCX 预览内部 overflow-auto 容器的父级链,确认是否存在 height: 100%flex-1 等约束缺失导致高度计算失败。
  3. 检查 PPTX 预览的缩略图轨道是否直接撑开根容器高度,确认根容器是否应固定为 60vh 或其他明确的视口比例高度。
  4. 对比相关 Issue #28563(同样涉及 PPTX 预览布局问题),确认是否为同一 PptxPreview 路径下的共同缺陷。
  5. 验证 absolute bottom-3 控件是否能随框架高度固定而锚定在预期位置。

验证方法

在修复后,于最小 612px 高度的视口中重复复现步骤:上传多页 DOCX 和至少 8 张幻灯片的 PPTX,切换至 Preview 标签页后确认(1)DOCX 的缩放控件在滚动文档时保持可见;(2)PPTX 当前幻灯片首屏直接可见;(3)PPTX 导航/缩放控件锚定在模态框底部,缩略图轨道可内部滚动。

参考来源

open-webui/open-webui #28877

GamsGo AI

AI 工具推荐

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

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

了解 GamsGo AI

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

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 19758

发表回复

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