issue: multiselect valve inputs overflow the Valves modal

问题场景

在 Open WebUI 管理页面的 Functions 中配置函数阀门（Valves）时，如果某个字段使用了 multiselect 输入类型，并且选中的标签拼接后超出弹窗宽度，多选触发器会撑开弹窗边界。触发器和下拉列表的宽度会延伸到弹窗右侧之外，覆盖在变暗的页面上，而非在弹窗内部截断显示。

报错原文

issue: multiselect valve inputs overflow the Valves modal

The multiselect trigger renders at the full single line width of the joined labels, overflowing the modal. Measured on a 480px wide Valves modal with ten selected options: the trigger is 589px wide and extends 126px past the modal's right edge, and the dropdown inherits the same overflow because it takes its minimum width from the trigger.

原因分析

根本原因在于 Valves.svelte 第 73 行：所有阀门输入都渲染在一个 flex-1 包装器内，但该包装器缺少 min-w-0 类。multiselect 触发器内部的标签 span 使用了 truncate（设置 white-space: nowrap），因此 span 的最小内容宽度就是完整的单行文本宽度。flex 子元素的默认 min-width: auto 会解析为该最小内容宽度，导致 flex-1 包装器无法收缩到弹窗宽度以下，整行因此超出弹窗边界。下拉菜单的 positionContent() 函数在 MultiSelect.svelte 中将其 minWidth 设为触发器测量宽度，因此下拉框继承了相同的溢出。

环境排查

• 确认 Open WebUI 版本是否为 dev 分支（commit b2050bcd4d3a686e3c266224d674bc2db2f607f0 或更早版本）。
• 浏览器的渲染模式是否支持标准 flexbox 布局（Chromium 浏览器已验证）。
• 检查函数阀门模型的字段定义中是否包含 multiselect 输入类型的字段，且选项数量足以拼接成长文本。

解决步骤

1. 升级到 Open WebUI dev 分支的最新版本，该问题已在 dev 分支修复（closed at 2026-08-29）。
2. 如果无法升级，可手动修改 src/lib/components/common/Valves.svelte 第 73 行：将 <div class=" flex-1"> 改为 <div class=" flex-1 min-w-0">。
3. 修改完成后重新构建前端资源（参考项目文档中的构建流程，此步骤取决于安装方式）。

验证方法

在管理页面的 Functions 中打开一个包含 multiselect 字段的函数，点击 Valves 按钮，确认触发器宽度不再超出弹窗右边缘，标签文本以省略号截断显示，打开下拉菜单时宽度对齐在弹窗内。

参考来源

open-webui/open-webui #29202

AI 工具推荐

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

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

了解 GamsGo AI

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