fix(web): cap the composer model seat at its preferred width

The composer collapses the model seat to its Models icon when the expanded
controls cannot share a row, but the seat's row-relative 45cqw cap made its
measured demand shrink with the row. The measured expanded state therefore
always fit and a narrow composer ellipsized the name instead of showing the
icon. Cap the seat at its 360px content width so the measurement sees the
demand, document the contract, and cover the collapse without the Plan chip.
This commit is contained in:
Yichen Jiang committed 2026-10-25 15:16:47 +08:00
1 parent 10551d0e4e
commit bc5c2d4142
5 files changed
+30 -8

No files matched your search

+21
View File
@@ -256,6 +256,27 @@ describe('web e2e: plan chip click area at the narrow viewport', () => {
expect(tripwire.warnings).toEqual([])
}, 200_000)
// The suite above only reaches the icon through the Plan chip's width. This
// case keeps the row otherwise empty: a long model name must still exceed
// the row above the mobile minimum, so a row-relative width cap cannot hide
// the demand behind a shrunken, ellipsized name.
it('collapses the model text on a narrow composer without another control', async () => {
onTestFailed(() => saveFailureShot(page, 'web-e2e-model-collapse-no-plan'))
await page.locator('[data-composer-input]').first().waitFor({ timeout: 10_000 })
await resizeControls(page, 1680)
await selectModel(page, LONG_MODEL)
await expectControlLayout(page, false)
await resizeControls(page, 440)
await expectControlLayout(page, true)
const trigger = page.getByRole('button', { name: /Select model/ })
expect(await trigger.getAttribute('title')).toContain(LONG_MODEL)
expect(await trigger.getAttribute('aria-label')).toContain(LONG_MODEL)
await resizeControls(page, 1680)
await expectControlLayout(page, false)
}, 120_000)
it('keeps the snapshot inventory closed', async () => {
await assertFixtureInventory(SNAPSHOT_DIR, ['session.v3.jsonl'])
})
@@ -21,8 +21,8 @@
en: 7871f9fe6bcc4459
zh: 0d51565c600b3958
/deepseek-ai-dsh-client-ui-conversation/shell-and-standard-props:
en: 5a9264158ebf0033
zh: b74e5807ed883ef6
en: d0ff0a313e92df44
zh: 5a2a44347348dc6b
/deepseek-ai-dsh-client-ui-conversation/temporary-composer-entries:
en: bb1244310f5c0382
zh: 824b84077432b559
+1 -1
View File
@@ -72,7 +72,7 @@ The shared image slot props keep display choices separate from durable reference
The composer uses a minimum 16px draft font on coarse-pointer devices to avoid focus-triggered browser zoom; larger font preferences still apply.
The composer measures its expanded control groups after size, content, visibility, or font-loading changes. If they cannot share a line, the row sets `--dsh-composer-model-text-display: none` and `--dsh-composer-model-icon-display: block` for the model seat; their defaults are `block` and `none`. Wrapping remains available if even the icon cannot fit.
The composer measures its expanded control groups after size, content, visibility, or font-loading changes. If they cannot share a line, the row sets `--dsh-composer-model-text-display: none` and `--dsh-composer-model-icon-display: block` for the model seat; their defaults are `block` and `none`. The model seat is measured at its content width, capped at 360px, rather than at a share of the row, so a long name stays visible in the measurement. Wrapping remains available if even the icon cannot fit.
The context meter follows the [statistics-control radius](../../../docs/ui-radius.md#radius-scale).
+1 -1
View File
@@ -72,7 +72,7 @@ Queue 预览启用空白折叠和文档边缘 trim,保留 emoji,并使用 CS
在粗指针设备上,composer 的草稿字号至少为 16px,以避免获得焦点时浏览器自动放大;更大的字号偏好仍然生效。
控件组的尺寸、内容、可见性或字体加载状态变化后,composer 测量展开状态下的控件组。若无法排在同一行,控制栏为模型位设置 `--dsh-composer-model-text-display: none` 和 `--dsh-composer-model-icon-display: block`;两者默认值分别为 `block` 和 `none`。若连图标也放不下,仍允许换行。
控件组的尺寸、内容、可见性或字体加载状态变化后,composer 测量展开状态下的控件组。若无法排在同一行,控制栏为模型位设置 `--dsh-composer-model-text-display: none` 和 `--dsh-composer-model-icon-display: block`;两者默认值分别为 `block` 和 `none`。模型位按内容宽度(最多 360px)参与测量,而不是按行宽比例,因此长模型名在测量中保持可见。若连图标也放不下,仍允许换行。
上下文占用率入口遵循[统计控件圆角规则](../../../docs/ui-radius.zh.md#radius-scale)。
@@ -11,10 +11,11 @@
align-items: center;
gap: 4px;
min-width: 0;
/* Legacy fallback, then a row-relative cap that grants long names more
room without letting this trailing control consume the composer. */
max-width: 220px;
max-width: min(360px, 45cqw);
/* Preferred width: the composer measures this expanded seat against the
space the other controls leave, so the cap must not shrink with the row.
A row-relative cap would let the measured demand fall with the available
width, and the expanded text would then always fit. */
max-width: 360px;
height: 28px;
padding: 0 4px 0 8px;
border: none;