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:
1 parent
10551d0e4e
commit
bc5c2d4142
5 files changed
+30
-8
No files matched your search
@@ -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
|
||||
|
||||
@@ -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).
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user