chat input: fix padding and jump when attaching by justschen · Pull Request #334128 · microsoft/vscode

Justin Chen (justschen) · 2026-09-02T21:59:19Z

fixes input jumping when attaching and better collapse behavior

Copilot

Copilot review overview

🟡 Changes recommended

Generic status actions can be clipped, compact glyph variants are not selected, and a blocking fixture bypasses production rendering.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review tier: Balanced
Findings: 1 · 2

New issues introduced by this change (3)

Severity	Finding
	`src/vs/sessions/contrib/chat/browser/media/chatWidget.css` — `MenuId.ChatInputStatus` is a generic extension menu, and contributed command icons are optional…
	`src/vs/sessions/contrib/chat/browser/media/chatWidget.css` — This changes status codicons to the compact size but only scales the regular glyph class. Icons…
	`src/vs/workbench/test/browser/componentFixtures/chat/chatInput.fixture.ts` — This blocking screenshot fixture manually recreates the picker DOM instead of rendering…

What changed in this PR

Refines chat input layout by stabilizing attachment expansion and standardizing compact picker controls.

Changes:

Anchors the new-session composer while attachments expand upward.
Centers compact pickers and reduces Auto model picker width.
Adds layout tests and blocking visual fixtures.

File	Description
`src/vs/workbench/test/browser/componentFixtures/chat/chatInput.fixture.ts`	Adds compact picker fixtures.
`src/vs/workbench/contrib/chat/test/browser/widget/input/chatInputPickerResponsiveLayout.test.ts`	Tests compact picker geometry.
`src/vs/workbench/contrib/chat/test/browser/agentSessions/agentHostChatInputPicker.test.ts`	Tests Agent Host picker layout.
`src/vs/workbench/contrib/chat/browser/widget/media/chat.css`	Centers compact toolbar icons.
`src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts`	Adjusts model picker minimum widths.
`src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/media/modelPicker.css`	Standardizes compact model controls.
`src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts`	Reuses the compact picker width constant.
`src/vs/workbench/contrib/chat/browser/agentSessions/agentHost/media/agentHostChatInputPicker.css`	Centers Agent Host picker icons.
`src/vs/sessions/contrib/chat/test/browser/newChatWidget.fixture.ts`	Adds Auto model and attachment fixtures.
`src/vs/sessions/contrib/chat/test/browser/chatView.test.ts`	Expands compact layout tests.
`src/vs/sessions/contrib/chat/test/browser/chatInput.fixture.ts`	Enables blocking compact screenshots.
`src/vs/sessions/contrib/chat/browser/newChatInput.ts`	Anchors attachment growth and improves picker detection.
`src/vs/sessions/contrib/chat/browser/media/chatWidget.css`	Sizes compact and status controls.
`src/vs/sessions/contrib/chat/browser/media/chatView.css`	Centers in-session compact pickers.
`src/vs/sessions/contrib/chat/browser/media/chatInput.css`	Centers new-session compact pickers.

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

github-actions · 2026-09-02T22:09:56Z

Screenshot Changes

Base: 9e75f50f Current: 7cd674e8

Changed (56)

sessions/chat/input/chatInput/SessionsWindow/Dark

Before	After

sessions/chat/input/chatInput/SessionsWindow/Light

Before	After

sessions/chat/input/chatInput/SessionsWindowSelection/Dark

Before	After

sessions/chat/input/chatInput/SessionsWindowSelection/Light

Before	After

sessions/chat/input/chatInput/ResponsiveModelResizeCycleCompact/Dark

Before	After

sessions/chat/input/chatInput/ResponsiveModelResizeCycleCompact/Light

Before	After

sessions/chat/input/chatInput/ResponsiveModelResizeCycleMinimal/Dark

Before	After

sessions/chat/input/chatInput/ResponsiveModelResizeCycleMinimal/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionAttachedContext/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionAttachedContext/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsSelected/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsSelected/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsEditedDisabled/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsEditedDisabled/Light

Before	After

chat/input/chatInput/Default/Dark

Before	After

chat/input/chatInput/Default/Light

Before	After

chat/input/chatInput/CompactWithProviderIcon/Dark

Before	After

chat/input/chatInput/CompactWithProviderIcon/Light

Before	After

chat/input/chatInput/WithArtifacts/Dark

Before	After

chat/input/chatInput/WithArtifacts/Light

Before	After

chat/input/chatInput/WithNotification/Dark

Before	After

chat/input/chatInput/WithNotification/Light

Before	After

chat/input/chatInput/WithNotificationAndTodos/Dark

Before	After

chat/input/chatInput/WithNotificationAndTodos/Light

Before	After

chat/input/chatInput/WithFileChanges/Dark

Before	After

chat/input/chatInput/WithFileChanges/Light

Before	After

chat/input/chatInput/WithTodos/Dark

Before	After

chat/input/chatInput/WithTodos/Light

Before	After

chat/input/chatInput/WithTodosAndFileChanges/Dark

Before	After

chat/input/chatInput/WithTodosAndFileChanges/Light

Before	After

chat/input/chatInput/WithArtifactsAndFileChanges/Dark

Before	After

chat/input/chatInput/WithArtifactsAndFileChanges/Light

Before	After

chat/input/chatInput/Full/Dark

Before	After

chat/input/chatInput/Full/Light

Before	After

chat/input/chatInput/VoiceDictationIdle/Dark

Before	After

chat/input/chatInput/VoiceDictationIdle/Light

Before	After

chat/input/chatInput/VoiceDictationRecording/Dark

Before	After

chat/input/chatInput/VoiceDictationRecording/Light

Before	After

chat/input/chatInput/VoiceDictationPreparing/Dark

Before	After

chat/input/chatInput/VoiceDictationPreparing/Light

Before	After

chat/input/chatInput/VoiceModeIdle/Dark

Before	After

chat/input/chatInput/VoiceModeIdle/Light

Before	After

chat/input/chatInput/VoiceModeConnecting/Dark

Before	After

chat/input/chatInput/VoiceModeConnecting/Light

Before	After

chat/input/chatInput/VoiceModeListening/Dark

Before	After

chat/input/chatInput/VoiceModeListening/Light

Before	After

chat/input/chatInput/VoiceModeSpeaking/Dark

Before	After

chat/input/chatInput/VoiceModeSpeaking/Light

Before	After

chat/input/chatInput/VoiceModeDisconnect/Dark

Before	After

chat/input/chatInput/VoiceModeDisconnect/Light

Before	After

chat/input/chatInput/WithPet/Dark

Before	After

chat/input/chatInput/WithPet/Light

Before	After

chat/input/chatInput/WithPetAndNotification/Dark

Before	After

chat/input/chatInput/WithPetAndNotification/Light

Before	After

chat/input/chatInput/WithPetAndNotificationAndTodos/Dark

Before	After

chat/input/chatInput/WithPetAndNotificationAndTodos/Light

Before	After

Added (8)

sessions/chat/newWidget/newChatWidget/NewSessionAutoModel/Dark

sessions/chat/newWidget/newChatWidget/NewSessionAutoModel/Light

sessions/chat/newWidget/newChatWidget/NewSessionCompactAutoModel/Dark

sessions/chat/newWidget/newChatWidget/NewSessionCompactAutoModel/Light

sessions/chat/newWidget/newChatWidget/NewSessionPhoneAttachedContext/Dark

sessions/chat/newWidget/newChatWidget/NewSessionPhoneAttachedContext/Light

chat/input/chatInput/CopilotHarnessCompactPickers/Dark

chat/input/chatInput/CopilotHarnessCompactPickers/Light

Errored (8)

Fixtures that failed to render — no screenshot was produced.

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunning/Dark — unknown error (no image hash produced)

unknown error (no image hash produced)

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunning/Light — unknown error (no image hash produced)

unknown error (no image hash produced)

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunningAutoStart/Dark — unknown error (no image hash produced)

unknown error (no image hash produced)

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostNotRunningAutoStart/Light — unknown error (no image hash produced)

unknown error (no image hash produced)

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostDisconnected/Dark — unknown error (no image hash produced)

unknown error (no image hash produced)

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/HostDisconnected/Light — unknown error (no image hash produced)

unknown error (no image hash produced)

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/Connecting/Dark — unknown error (no image hash produced)

unknown error (no image hash produced)

sessions/remoteHostUnavailable/remoteHostUnavailableEmptyState/Connecting/Light — unknown error (no image hash produced)

unknown error (no image hash produced)

- Keeps text-only status contributions at their intrinsic width while applying compact sizing only to icon actions. - Uses optically tuned compact codicons so status controls remain clear at the compact control tier. - Drives the Copilot Agent Host fixture through the production ChatInputPart lifecycle so responsive picker regressions are caught. - Applies the attachment offset directly so hygiene does not treat a local layout variable as an unregistered theme token. (Commit message generated by Copilot) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Records the Ubuntu-rendered baselines for the compact picker fixtures so the blocking screenshot gate covers the reviewed layouts. - Updates the attached-context baselines after the composer growth is anchored upward. (Commit message generated by Copilot) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Resolve the Agent Host compact-picker CSS conflict by preserving both the sandbox indicator behavior from main and the reviewed compact control geometry. Keep main's current attachment screenshot baselines while retaining this PR's new blocking fixtures. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Expose the component fixture document body as the workbench layout service's main container so responsive phone-layout checks exercise the same contract as production. (Commit message generated by Copilot) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Record the post-merge Ubuntu baselines for compact picker, attachment growth, status action, and phone layout fixtures after resolving main conflicts and fixture render errors. (Commit message generated by Copilot) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Justin Chen (justschen) · 2026-09-03T16:19:34Z

my bad on all the approvals - agent marked it ready for review when it wasn't 🚀

`_renderLabel` runs from a resize-driven autorun. Measuring the chip there cleared `minWidth`, read `scrollWidth`, then wrote `minWidth` again, so every ResizeObserver pass dirtied layout twice and never settled. The NewSessionCompactAutoModel fixture failed to render with "ResizeObserver loop completed with undelivered notifications". Take the fixed widths from main instead, including the narrower floor for the Auto label that #334128 added alongside that fixture. This resolves the merge conflict in this hunk the other way; the measured floor read better in the abstract, but it cannot be computed from inside the resize callback. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

chat input: fix padding and jump when attaching

f761d66

Copilot AI balanced review requested due to automatic review settings September 2, 2026 21:59

Copilot started reviewing on behalf of Justin Chen (justschen) September 2, 2026 22:00 View session

Copilot AI reviewed Sep 2, 2026

View reviewed changes

Comment thread src/vs/sessions/contrib/chat/browser/media/chatWidget.css Outdated

Comment thread src/vs/sessions/contrib/chat/browser/media/chatWidget.css Outdated

Comment thread src/vs/workbench/test/browser/componentFixtures/chat/chatInput.fixture.ts Outdated

vs-code-engineering Bot assigned Justin Chen (justschen) Sep 2, 2026

Justin Chen (justschen) marked this pull request as ready for review September 2, 2026 23:20

Dmitriy Vasyura (dmitrivMS) reviewed Sep 3, 2026

View reviewed changes

Comment thread src/vs/sessions/contrib/chat/browser/newChatInput.ts Outdated

Comment thread src/vs/sessions/contrib/chat/browser/newChatInput.ts

Comment thread src/vs/sessions/contrib/chat/browser/media/chatWidget.css Outdated

roblourens previously approved these changes Sep 3, 2026

View reviewed changes

fix some phone layout issues'

f2351d9

Justin Chen (justschen) dismissed roblourens’s stale review via f2351d9 September 3, 2026 07:49

Giuseppe Cianci (Giuspepe) previously approved these changes Sep 3, 2026

View reviewed changes

Christof Marti (chrmarti) previously approved these changes Sep 3, 2026

View reviewed changes

Justin Chen (justschen) dismissed stale reviews from Christof Marti (chrmarti) and Giuseppe Cianci (Giuspepe) via b6a5cd0 September 3, 2026 08:11

Dirk Bäumer (dbaeumer) previously approved these changes Sep 3, 2026

View reviewed changes

Justin Chen (justschen) dismissed Dirk Bäumer (dbaeumer)’s stale review via 1a4c718 September 3, 2026 08:26

Sandeep Somavarapu (sandy081) approved these changes Sep 3, 2026

View reviewed changes

Justin Chen (justschen) merged commit 48b6416 into main Sep 3, 2026
40 checks passed

Justin Chen (justschen) deleted the justin/fidough branch September 3, 2026 16:19

vs-code-engineering Bot added this to the 1.137.0 milestone Sep 3, 2026

Justin Chen (justschen) mentioned this pull request Sep 3, 2026

Model picker is too wide due to 90px minimum width #334075

Closed

Navigation Menu

Uh oh!

chat input: fix padding and jump when attaching - #334128

chat input: fix padding and jump when attaching#334128
Justin Chen (justschen) merged 7 commits into
mainfrom
justin/fidough

Justin Chen (justschen) commented Sep 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Sep 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Justin Chen (justschen) commented Sep 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Uh oh!

Conversation

Justin Chen (justschen) commented Sep 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshot Changes

Changed (56)

Added (8)

Errored (8)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Justin Chen (justschen) commented Sep 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

github-actions Bot commented Sep 2, 2026 •

edited

Loading