issue: The More and Eject buttons on model picker rows are too small to click easily

在 Open WebUI 模型选择器中,“...”对应的 More Options 按钮和已加载 Ollama 模型旁的 Eject model 按钮没有设置独立尺寸,点击区域只有图标本身大小,紧邻图标的点击会落到可点击的模型行上,导致误选模型并关闭选择器;优先排查这两类按钮的命中区域尺寸是否达到

快速结论:在 Open WebUI 模型选择器中,“…”对应的 More Options 按钮和已加载 Ollama 模型旁的 Eject model 按钮没有设置独立尺寸,点击区域只有图标本身大小,紧邻图标的点击会落到可点击的模型行上,导致误选模型并关闭选择器;优先排查这两类按钮的命中区域尺寸是否达到 WCAG 2.2 要求的至少 24×24 像素。

适用环境:Open WebUI dev 分支(提交 63eed95c8),Git Clone 安装方式;Linux;Firefox;Ollama v0.40.7;默认设置,文本缩放设为默认值的 1.22 倍。

最快修复方案:暂无确认的一步修复方案。Issue 正文只描述了问题、预期效果和复现方法,没有给出已验证的修复步骤。

注意事项:该 Issue 涉及的按钮尺寸会被文本缩放放大(1.22 倍时 More Options 约 19.5×19.5 像素,Eject model 约 14.6×14.6 像素),但这不代表满足最小点击区域要求;相关 Issue #32920 被自动标记为与 #32906、#32864、#27205 相关,均为模型选择器内小控件的命中区域或交互问题。在官方修复前,调整浏览器缩放或文本大小只能改变测量值,不能从根本上扩大按钮的独立点击区域。

问题场景

在 Open WebUI 中使用 Ollama 模型时,先向某个 Ollama 模型发送消息使其保持已加载状态,然后新建聊天并打开模型选择器。此时每一行模型右侧都有一个 More Options(“…”)按钮,已加载的 Ollama 模型还会额外显示 Eject model 按钮。用户尝试点击这些按钮时,按钮本身只有图标大小,点击稍偏一点就会命中整行模型,触发选模型并关闭选择器。

报错原文

issue: The More and Eject buttons on model picker rows are too small to click easily

原因分析

根据 Issue 描述,这两个按钮都没有自身尺寸,实际命中区域与图标完全一致:默认文本大小下 More Options 约为 16×16 像素,Eject model 约为 12×12 像素。由于按钮所在的模型行本身也是可点击区域,点击图标旁边几个像素会落到行上而不是按钮上,从而直接选择模型并关闭选择器。这属于无障碍(a11y)问题,预期按钮命中区域至少为 24×24 像素,即 WCAG 2.2 对目标尺寸的最低要求,且不适用间距例外,因为周围的模型行同样是一个目标。

环境排查

  • 确认 Open WebUI 版本与分支:Issue 报告的是 dev 分支提交 63eed95c8,且作者已在最新 release 与当前 dev 分支上复现。
  • 确认安装方式为 Git Clone。
  • 确认浏览器为 Firefox,操作系统为 Linux。
  • 确认 Ollama 版本为 v0.40.7。
  • 确认模型选择器为默认设置,并记录文本缩放比例(Issue 中为默认值的 1.22 倍)。
  • 确认测试对象为已加载 Ollama 模型所在行,因为只有已加载模型才显示 Eject model 按钮。

解决步骤

  1. 向一个 Ollama 模型发送消息,使其处于加载状态,然后新建聊天并打开模型选择器,确认目标模型中同时出现 More Options 和 Eject model 按钮。
  2. 打开浏览器开发者工具,切换到 Console 标签,粘贴 Issue 中提供的测量语句并回车,查看各按钮的实际宽高:
JSON.stringify([...document.querySelectorAll('[role="option"] button[aria-label="More Options"], [role="option"] button[aria-label="Eject model"]')].slice(0, 4).map((b) => { const r = b.getBoundingClientRect(); return [b.getAttribute('aria-label'), `${r.width.toFixed(1)} x ${r.height.toFixed(1)}`]; }))
  1. 在默认文本大小下,确认 More Options 约为 16×16 像素、Eject model 约为 12×12 像素;若文本缩放为 1.22 倍,测量值约为 19.5 和 14.6 像素。
  2. 将鼠标悬停在某一行上,点击“…”图标左侧几个像素的位置,确认模型被选中且选择器关闭,从而复现问题。
  3. 由于 Issue 没有提供已验证的修复方式,现阶段可优先尝试以下方向(均未在 Issue 中验证):为这两个按钮设置至少 24×24 像素的最小尺寸或足够的内边距,使其命中区域独立于图标;或调整按钮与模型行点击事件的层级关系,避免点击按钮周围时误触发选模型。
  4. 修改后按相同步骤重新测量按钮尺寸并再次点击图标边缘,确认不再误选模型。

验证方法

在浏览器 Console 中重新执行上述测量语句,确认 More Options 和 Eject model 按钮的命中区域不小于 24×24 像素;再点击图标附近几个像素的位置,确认不会触发模型被选中、选择器不会因此关闭,且 More 菜单或 Eject 操作能正常响应。若问题修复后仍出现误选,说明命中区域或事件处理仍未完全分离,需要继续排查。

参考来源

open-webui/open-webui #32919

GamsGo AI

AI 工具推荐

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

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

了解 GamsGo AI

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

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 29951

发表回复

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