issue: admin Analytics settings tab expands outside the settings modal

用户在 Open WebUI 的 dev 分支(截至 2026-07 月)中,以管理员身份打开 Settings → Analytics 标签页时,如果已有较大体量的分析历史数据(例如多年的数据),并且选择 All time 时间范围,则会出现表格和图表渲染超出模态框右侧边界、无水平滚动条、内容被页

issue: admin Analytics settings tab expands outside the settings modal

issue: admin Analytics settings tab expands outside the settings modal

快速结论:此问题出现在 Open WebUI 的 Analytics(分析)标签页内,当视图窗口较窄(约 <1350px)时,Model Usage/User Activity 表格和图表的宽度会撑开设置模态框的边界,导致内容溢出。优先排查 SettingsModal.svelte 中 flex 子项的 min-w-0 缺失以及 ChartLine.svelte 中 SVG 的 viewBox 属性造成的宽度计算问题。

问题场景

用户在 Open WebUI 的 dev 分支(截至 2026-07 月)中,以管理员身份打开 Settings → Analytics 标签页时,如果已有较大体量的分析历史数据(例如多年的数据),并且选择 All time 时间范围,则会出现表格和图表渲染超出模态框右侧边界、无水平滚动条、内容被页面背景裁剪的现象。

报错原文

On the latest `dev` branch, the admin Settings → Analytics tab can expand outside the settings modal: the Model Usage / User Activity tables and chart render past the modal's right edge (columns clipped against the page background, no horizontal scrolling), instead of being contained within the modal.

原因分析

问题源于两个 CSS 布局层面的容器溢出漏洞共同作用:

  1. SettingsModal.svelte 中,设置内容列 (<div class="flex-1">) 是模态框 md:flex-row 布局中的一个 flex 项,但没有设置 min-w-0。因此该列的自动最小尺寸为其内容的 min-content 宽度——当标签页内容宽度较大时,整个列会被撑出模态框边界。
  2. ChartLine.svelte 中的 SVG 元素使用了 viewBox="0 0 1000 …",同时设置了 w-full 和固定高度的容器,但因 viewBox 属性赋予了 SVG 一个内在宽高比(即使通过 preserveAspectRatio="none" 使视觉上比例无意义),在具有确定高度的情况下,该 SVG 会向上级元素贡献约 1000px 的 min-content 宽度,导致溢出。

修复方案已合并到 #27306(该 PR 也修复了类似的 Archived Chats 溢出问题)。

环境排查

  • Open WebUI 版本:dev 分支(2026-07 月之前)
  • 浏览器窗口有效宽度约 <1350px 时易复现
  • 不需要特定 Python/CUDA 版本,属于前端 CSS 问题
  • 应与分析历史数据量无关,仅与模态框内容渲染宽度有关

解决步骤

  1. 升级到包含 #27306 修复版本的 Open WebUI(该 PR 已合并到上游)。
  2. 如果无法升级,作为临时绕过方案:可尝试在浏览器开发者工具中手动向 SettingsModal.svelte 的内容列添加 min-width: 0 样式。
  3. 针对 ChartLine 溢出问题,可验证 ChartLine.svelte 中 SVG 是否需要调整 viewBox 或增加 overflow: hidden 容器——但最佳做法是采用上游修复。

验证方法

打开管理员 Settings → Analytics 标签页,选择 All time,将浏览器窗口宽度缩放至 1350px 以下,检查 Model Usage / User Activity 表格和折线图是否仍然超出模态框右侧边界。如果表格内部出现水平滚动条且内容不溢出,则问题已修复。

参考来源

open-webui/open-webui #27329

GamsGo AI

AI 工具推荐

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

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

了解 GamsGo AI

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

celebrityanime
celebrityanime
文章: 14969

发表回复

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