fix(desktop): prevent model list option overlap when provider has many models / 修复供应商模型较多时设置页面模型列表选项重叠

[HaoyueQin]

Fixes #5563. Fixes #5585. Fixes #5785. Fixes #6480. Fixes #6723.

---

Summary

Fixes model list option overlap in the desktop settings when a provider (e.g., SiliconFlow, Volcengine) returns many models — the CSS grid container for model candidates had an undersized min-height per option card and no overflow protection, causing option cards to visually overlap, especially when model names wrapped to multiple lines.

Root cause

.provider-model-draft__option had min-height: 32px, which is smaller than the actual minimum content height (~46px: checkbox + model name + 4px gap + vision checkbox row + 10px padding). The grid container .provider-model-draft__list used max-height: 220px with overflow: auto, so with many models the tightly packed rows allowed content to bleed into adjacent cards. Long model names that wrapped to 2+ lines made the overlap worse since the card height grew beyond 32px but had no explicit clipping boundary — the vision checkbox could be partially or fully covered by the next card.

This affected four independent user reports across different providers (SiliconFlow, Volcengine, and others), all with the same underlying cause. A previous attempt ( #5943 only increasing max-height from 220px to 280px and adding bottom padding) merely reduced the probability of truncation without fixing the real issue — the cards could still overflow their boundaries.

Changes

1 file changed: desktop/frontend/src/styles.css (+3, −2)

.provider-model-draft__list:

• padding-right: 2px → padding: 0 2px 6px 0 — bottom padding prevents the last grid row from touching the container edge
• Added grid-auto-rows: min-content — each grid row sizes to the tallest option card in that row, preventing vertical overlap between rows regardless of how many lines a model name wraps to

.provider-model-draft__option:

• Removed min-height: 32px — content now determines height naturally via flexbox; the card can no longer be shorter than its actual content
• Added overflow: hidden — prevents text or checkbox content from bleeding into adjacent cards; long model names are handled by the existing overflow-wrap: anywhere on the inner span

Scope

These CSS classes are shared by both ProviderModelDraftPicker (the "Refresh Models" draft panel shown after clicking "Refresh Models" in the provider access page) and ProviderEditorModelPicker (the inline model picker inside ProviderEditor), so both views benefit from the fix without any JSX changes.

Closes

• [Bug]: 模型供应商如果提供模型比较多，配置里选项会叠在一起 #5563 — 模型供应商如果提供模型比较多，配置里选项会叠在一起
• [Bug]: 模型列表复选框重叠 #5585 — 模型列表复选框重叠
• [Bug]: 模型接入的刷新模型后显示重叠了 #5785 — 模型接入的刷新模型后显示重叠了
• [Bug]: 模型设置页面发现模型列表样式混乱 #6480 — 模型设置页面发现模型列表样式混乱

Verification

• cd desktop/frontend && npx tsx src/__tests__/typography-overflow-contract.test.ts — 103 passed, 0 failed
• cd desktop/frontend && npx tsx src/__tests__/provider-model-refresh.test.ts — 18 passed, 0 failed
• gofmt -l . — no changes (no Go files touched)
• cd desktop && wails build — build succeeds, binary produced at desktop/build/bin/reasonix-desktop.exe
• Launched with REASONIX_HOME isolation — no runtime errors, settings UI renders correctly

Cache impact

Cache-impact: none — CSS-only change in the desktop frontend stylesheet; no change to provider-visible system prompt, memory prefix, tool schemas, tool ordering, request serialization, compaction, or MCP/tool registration.

Cache-guard: N/A — purely visual CSS change with no cache implications.

System-prompt-review: N/A — no system-prompt-sensitive files changed.

---

摘要

修复桌面端设置页面中模型列表选项重叠的问题。当供应商（如硅基流动、火山引擎等）返回大量模型时，模型候选列表的 CSS 网格容器中每个选项卡片的 min-height 设置过小且缺乏溢出保护，导致卡片之间视觉重叠——尤其是模型名换行时，vision 复选框会被相邻卡片部分或完全遮盖。

根因

.provider-model-draft__option 设置了 min-height: 32px，但实际内容的物理最小高度约为 46px（复选框 + 模型名 + 4px 间距 + vision 复选框行 + 10px 内边距）。.provider-model-draft__list 使用 max-height: 220px 配合 overflow: auto，当模型数量较多时，紧凑排列的行之间内容会溢出到相邻卡片。模型名较长换至 2 行以上时，卡片高度超出 32px 但没有显式的裁剪边界——vision 复选框可能被下一个卡片完全遮盖导致点击不到。

此问题有四位用户分别独立报告，涉及不同供应商（硅基流动、火山引擎等），根因完全相同。之前的一种方案（ #5943 仅将 max-height 从 220px 增至 280px 并加底部内边距）只能降低截断概率，没有解决根本问题——卡片内容仍会溢出边界。

改动

1 个文件： desktop/frontend/src/styles.css（+3 行，−2 行）

.provider-model-draft__list：

• padding-right: 2px → padding: 0 2px 6px 0 — 底部内边距防止最后一行的卡片紧贴容器边缘
• 新增 grid-auto-rows: min-content — 每行高度自适应该行最高卡片，无论模型名换多少行都不会导致行间垂直重叠

.provider-model-draft__option：

• 删除 min-height: 32px — 卡片高度由实际内容通过 flexbox 自然决定，卡片不会再比内容矮
• 新增 overflow: hidden — 防止文字或复选框溢出到相邻卡片；长模型名由已有的 overflow-wrap: anywhere 处理

影响范围

这些 CSS 类被 ProviderModelDraftPicker（接入页面点击"刷新模型"后的候选面板）和 ProviderEditorModelPicker（ProviderEditor 表单内的内联模型选择器）共用，因此两处均受益于此修复，无需改动任何 JSX。

关闭 Issues

• [Bug]: 模型供应商如果提供模型比较多，配置里选项会叠在一起 #5563 — 模型供应商如果提供模型比较多，配置里选项会叠在一起
• [Bug]: 模型列表复选框重叠 #5585 — 模型列表复选框重叠
• [Bug]: 模型接入的刷新模型后显示重叠了 #5785 — 模型接入的刷新模型后显示重叠了
• [Bug]: 模型设置页面发现模型列表样式混乱 #6480 — 模型设置页面发现模型列表样式混乱

验证

• cd desktop/frontend && npx tsx src/__tests__/typography-overflow-contract.test.ts — 103 通过，0 失败
• cd desktop/frontend && npx tsx src/__tests__/provider-model-refresh.test.ts — 18 通过，0 失败
• gofmt -l . — 无更改（未触碰 Go 文件）
• cd desktop && wails build — 构建成功，产物生成于 desktop/build/bin/reasonix-desktop.exe
• 使用 REASONIX_HOME 隔离环境启动 — 无运行时错误，设置页面 UI 正常渲染

缓存影响

Cache-impact: none — 仅桌面端前端样式表的 CSS 改动；不影响 provider 可见的系统 prompt、memory 前缀、工具 schema、工具排序、请求序列化、压缩或 MCP/工具注册。

Cache-guard: N/A — 纯视觉 CSS 改动，无缓存影响。

System-prompt-review: N/A — 未改动系统 prompt 敏感文件。

---

效果展示

[HaoyueQin]

Rebased on the latest main-v2 which now includes PR #6677 (per-model context window). As noted in that PR's review, the .provider-model-draft__* CSS changes are adjacent and there is no hard conflict.

I've verified that the three CSS changes remain fully compatible with the new context window input row:

• Removed min-height: 32px — the card now naturally grows to fit the model name, vision checkbox, and context window input rows (~84–92px total). This is even more important now since the card is taller.
• overflow: hidden — prevents any content from bleeding into adjacent cards.
• grid-auto-rows: min-content — each grid row sizes to the tallest card in that row, so the new context input row does not cause vertical overlap.
• Bottom padding — the last row no longer touches the container edge.

The diff against main-v2 is still exactly 1 file, 3 insertions, 2 deletions. No additional changes were needed.

---

已 rebase 至最新的 main-v2（包含 PR #6677 的逐模型上下文窗口功能）。如该 PR 审查中所提到的，.provider-model-draft__* 的 CSS 改动是相邻的，无硬冲突。

已验证三处 CSS 改动与新加的 context 输入行完全兼容：

• 删除 min-height: 32px — 卡片现在自然撑高，容纳模型名、vision 复选框和 context 输入行等全部内容（约 84–92px）。卡片变高后这一改动更加重要。
• overflow: hidden — 防止任何内容溢出到相邻卡片。
• grid-auto-rows: min-content — 每行高度自适应行内最高卡片，context 输入行不会导致垂直重叠。
• 底部内边距 — 最后一行不再紧贴容器边缘。

与 main-v2 的 diff 仍为 1 个文件、3 增 2 删，无需额外改动。

[HaoyueQin]

手动构建验证

修复前

---

修复后

---

@SivanCola

After rebasing onto the latest main-v2 (which includes PR #6677), I realized that the per-model context window feature is actually unusable without this CSS fix. The context window input row adds ~28px to each option card, making the cards ~84–92px tall. With min-height: 32px still in place and no overflow: hidden, the cards visually overlap even more severely than before — the context window input can be partially or fully covered by the next card, making it impossible to interact with.

The three CSS changes in this PR (removing min-height, adding overflow: hidden, grid-auto-rows: min-content, and bottom padding) are not cosmetic — they are a prerequisite for the per-model context window feature to work in practice. Without them, users who add a provider with many models (e.g., SiliconFlow with 50+ models) will see overlapping cards where the context window input is inaccessible.

I've built both versions (before and after) from the latest main-v2 and verified the difference. The fix is minimal (1 file, +3/−2 lines) and has no cache impact or side effects. Would appreciate a review.

---

@SivanCola

在 rebase 到最新的 main-v2（包含 PR #6677）后，我发现逐模型上下文窗口功能如果没有这个 CSS 修复实际上无法使用。context window 输入行给每个 option card 增加了约 28px 高度，卡片总高度达到约 84–92px。min-height: 32px 仍然存在且没有 overflow: hidden 的情况下，卡片视觉重叠比之前更加严重——context window 输入框可能被相邻卡片部分或完全遮盖，导致无法操作。

本 PR 的三处 CSS 改动（删除 min-height、增加 overflow: hidden、grid-auto-rows: min-content、底部内边距）不是装饰性的——它们是逐模型上下文窗口功能能够实际使用的前提条件。没有这些修复，用户添加模型较多的供应商（如硅基流动 50+ 个模型）时，重叠的卡片会导致 context window 输入框无法点击。

我已基于最新 main-v2 构建了修改前后两个版本并验证了差异。修复极小（1 个文件，+3/−2 行），无缓存影响或副作用。希望能尽快审查。

[SivanCola]

Approved. This is a well-scoped CSS fix. The PR correctly prevents provider model cards from collapsing under a constrained model list by sizing implicit grid rows to their content, removing the undersized card minimum, and containing unexpected overflow.

Why this fits the desktop architecture:

• The shared selectors cover both the Refresh Models draft picker and the inline provider editor.
• The change is CSS-only and does not affect provider requests, prompt-cache behavior, persistence, or security boundaries.

The original checks passed but did not explicitly guard the changed CSS contract. I added test commit d2b69e2 with focused assertions for content-sized rows, absence of the 32px card minimum, and overflow containment.

Verified:

• npx tsx src/tests/typography-overflow-contract.test.ts — 127 passed
• node scripts/check-css-syntax.mjs src/styles.css — passed
• node scripts/check-z-index-tokens.mjs src/styles.css — passed
• git diff --check — passed
• Browser layout check confirmed the constrained cards grow to fit their controls and context-window inputs remain clickable.