From 1ef2b1591d2807943f65e04c7ccbd6e46fe43f0e Mon Sep 17 00:00:00 2001 From: chengluyu <2239547+chengluyu@users.noreply.github.com> Date: Mon, 13 Jul 2026 19:14:26 +0800 Subject: [PATCH 1/4] fix(web): size workspace picker from full content --- .../src/components/chat/ConversationPane.vue | 78 ++++++++++++++++--- 1 file changed, 69 insertions(+), 9 deletions(-) diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue index f94805c9db..4e1840ed62 100644 --- a/apps/kimi-web/src/components/chat/ConversationPane.vue +++ b/apps/kimi-web/src/components/chat/ConversationPane.vue @@ -194,6 +194,13 @@ function measureText(text: string, style: CSSStyleDeclaration): number { return measureNaturalWidth(prepared); } +function inlineBoxSize(style: CSSStyleDeclaration): number { + return cssPx(style.paddingLeft) + + cssPx(style.paddingRight) + + cssPx(style.borderLeftWidth) + + cssPx(style.borderRightWidth); +} + function workspacePickerMaxWidth(): number { const containerWidth = contentWrapRef.value?.getBoundingClientRect().width ?? window.innerWidth; return Math.max(0, containerWidth * 0.75); @@ -203,17 +210,58 @@ function updateWorkspacePickerWidth(): void { const probe = wsPickMeasureRef.value; if (!probe) return; + const menu = probe.querySelector('.ws-pick-menu'); + const item = probe.querySelector('.ws-pick-item'); + const itemName = probe.querySelector('.ws-pick-item-name'); const itemPath = probe.querySelector('.ws-pick-item-path'); - if (!itemPath) return; + const moreItem = probe.querySelector('.ws-pick-more'); + const moreLabel = moreItem?.querySelector('span'); + const action = probe.querySelector('.ws-pick-action'); + const actionIcon = action?.querySelector('svg'); + const actionLabel = action?.querySelector('span'); + if ( + !menu || + !item || + !itemName || + !itemPath || + !moreItem || + !moreLabel || + !action || + !actionIcon || + !actionLabel + ) { + return; + } + const menuStyle = getComputedStyle(menu); + const itemStyle = getComputedStyle(item); + const itemNameStyle = getComputedStyle(itemName); const itemPathStyle = getComputedStyle(itemPath); - - const measuredPathWidth = (props.workspaces ?? []).reduce( - (max, workspace) => Math.max(max, measureText(workspace.shortPath, itemPathStyle)), + const moreItemStyle = getComputedStyle(moreItem); + const moreLabelStyle = getComputedStyle(moreLabel); + const actionStyle = getComputedStyle(action); + const actionLabelStyle = getComputedStyle(actionLabel); + + const workspaceRowWidth = (props.workspaces ?? []).reduce( + (max, workspace) => Math.max( + max, + measureText(workspace.name, itemNameStyle), + measureText(workspace.shortPath, itemPathStyle), + ), 0, - ); - wsPickMenuWidth.value = measuredPathWidth - ? `${Math.ceil(Math.min(measuredPathWidth, workspacePickerMaxWidth()))}px` + ) + inlineBoxSize(itemStyle); + const moreRowWidth = hiddenWorkspaceCount.value > 0 + ? measureText(moreLabel.textContent ?? '', moreLabelStyle) + inlineBoxSize(moreItemStyle) + : 0; + const actionRowWidth = measureText(actionLabel.textContent ?? '', actionLabelStyle) + + actionIcon.getBoundingClientRect().width + + cssPx(actionStyle.columnGap) + + inlineBoxSize(actionStyle); + const naturalMenuWidth = Math.max(workspaceRowWidth, moreRowWidth, actionRowWidth) + + inlineBoxSize(menuStyle); + + wsPickMenuWidth.value = naturalMenuWidth + ? `${Math.ceil(Math.min(naturalMenuWidth, workspacePickerMaxWidth()))}px` : ''; } @@ -1795,7 +1843,7 @@ defineExpose({ loadComposerForEdit, focusComposer }); top: calc(100% + 6px); z-index: var(--z-dropdown); width: var(--ws-pick-menu-width, max-content); - min-width: var(--ws-pick-menu-width, max-content); + min-width: min(180px, calc(100vw - var(--space-8))); max-width: calc(100vw - var(--space-8)); max-height: 50vh; overflow-y: auto; @@ -1822,12 +1870,24 @@ defineExpose({ loadComposerForEdit, focusComposer }); .ws-pick-item:hover { background: var(--panel2); } .ws-pick-item.on { background: var(--color-accent-soft); } .ws-pick-item-name { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text); } .ws-pick-item.on .ws-pick-item-name { color: var(--color-accent-hover); } -.ws-pick-item-path { font-size: var(--text-xs); font-weight: 475; color: var(--muted); } +.ws-pick-item-path { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: var(--text-xs); + font-weight: 475; + color: var(--muted); +} .ws-pick-item.ws-pick-more { flex-direction: row; align-items: center; From 1b06d54deff5289f61d95d0d3f6a05732a1c4285 Mon Sep 17 00:00:00 2001 From: chengluyu <2239547+chengluyu@users.noreply.github.com> Date: Mon, 13 Jul 2026 19:19:59 +0800 Subject: [PATCH 2/4] chore: add web workspace picker changeset --- .changeset/fix-web-workspace-picker-width.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fix-web-workspace-picker-width.md diff --git a/.changeset/fix-web-workspace-picker-width.md b/.changeset/fix-web-workspace-picker-width.md new file mode 100644 index 0000000000..b705b0b6f8 --- /dev/null +++ b/.changeset/fix-web-workspace-picker-width.md @@ -0,0 +1,5 @@ +--- +"@moonshot-ai/kimi-code": patch +--- + +web: Fix the workspace picker menu sizing too narrowly for its content. From 2c6fb871a8c927e35befd26cf8ce84db1b9bf3c2 Mon Sep 17 00:00:00 2001 From: chengluyu <2239547+chengluyu@users.noreply.github.com> Date: Mon, 13 Jul 2026 19:45:19 +0800 Subject: [PATCH 3/4] refactor(web): use intrinsic workspace picker sizing --- .../src/components/chat/ConversationPane.vue | 188 ++---------------- 1 file changed, 14 insertions(+), 174 deletions(-) diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue index 4e1840ed62..e0354172c5 100644 --- a/apps/kimi-web/src/components/chat/ConversationPane.vue +++ b/apps/kimi-web/src/components/chat/ConversationPane.vue @@ -1,6 +1,5 @@