issue: tab content slides under the tab bar when UI Scale is above 1

问题场景

用户在 Open WebUI 中通过 Settings > Interface 把 UI Scale 调整到 1.2 或更高，然后打开侧边栏中的 Files 标签页。此时 Files 标签页顶部用于显示当前文件夹（Home）的行被标签栏压住；UI Scale 越高，被遮挡的区域越大。Issue 还提到，相同的固定偏移也用于其他标签类型，以及全宽标签模式下的主聊天区域。

报错原文

issue: tab content slides under the tab bar when UI Scale is above 1

At a UI Scale of 1.2, about 7 pixels are covered. At 1.5, about 18 pixels are.

原因分析

根据 Issue 正文中的排查信息，最可能的原因是：标签栏高度以 rem 为单位设置，因此会随 UI Scale 一起放大；而每个标签页的内容顶部被固定下移 36 像素。这个固定值只在默认缩放比例下与标签栏高度吻合，所以当 UI Scale 大于 1 时，标签栏继续变高，但内容偏移量不变，导致标签页顶部内容滑入标签栏下方并被遮挡。

环境排查

• 确认 Open WebUI 版本：Issue 报告使用的是 dev 分支提交 5659a724f，并注明在最新发布版和 dev 分支均可复现；可先确认当前部署版本是否包含该提交或相近代码。
• 确认安装方式：Issue 使用 Git Clone，非 Git Clone 部署方式是否同样受影响尚未在 Issue 中说明。
• 确认 UI Scale：先在 Settings > Interface 中把 UI Scale 设为大于 1 的值（如 1.2、1.5），再打开 Files 标签页复现。
• 确认浏览器与系统：Issue 环境为 Linux + Firefox；其他浏览器是否同样出现，Issue 未提供证据。
• 确认 Ollama 版本：Issue 记录为 v0.40.15；该版本信息仅用于环境对照，与本次布局问题无直接因果关系。
• 检查前端样式：查找标签栏高度是否以 rem 设置，以及标签内容顶部偏移是否使用固定 36px；这是定位问题的关键证据。

解决步骤

1. 先在 Settings > Interface 中把 UI Scale 临时调回 1，确认 Files 标签页顶部 Home 行恢复正常显示，从而复现并确认问题与 UI Scale 相关。
2. 将 UI Scale 依次设为 1.2 和 1.5，记录 Files 标签页顶部被遮挡的像素量（Issue 报告约为 7px 和 18px），以便验证修复效果。
3. 检查前端样式中标签栏的高度定义，以及标签内容顶部偏移的实现方式；重点确认偏移是否仍为固定 36px。
4. 如需修改代码，可优先尝试让标签内容的顶部偏移与标签栏的实际高度保持一致（例如统一使用 rem 或动态计算标签栏高度），而不是写死像素值。这是根据 Issue 原因分析得出的推测方案，尚未在 Issue 中验证。
5. 同理，Issue 指出其他标签类型和全宽标签模式下的主聊天区域也使用相同的固定偏移；修改时应一并覆盖这些位置，避免只修 Files 标签页。

验证方法

分别把 UI Scale 设为 1、1.2 和 1.5，打开侧边栏中的 Files 标签页，确认顶部 Home 文件夹行始终完整显示在标签栏下方，不再被遮挡，也不出现额外空隙。再切换到其他标签类型以及全宽标签模式下的主聊天区域，确认内容顶部位置同样正常。

参考来源

open-webui/open-webui #33829

AI 工具推荐

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

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

了解 GamsGo AI

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