chat input: fix padding and jump when attaching - #334128
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
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
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.
Contributor
Screenshot ChangesBase: Changed (56)
|
| 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>
Justin Chen (justschen)
marked this pull request as ready for review
September 2, 2026 23:20
- 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>
roblourens
previously approved these changes
Sep 3, 2026
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>
Giuseppe Cianci (Giuspepe)
previously approved these changes
Sep 3, 2026
Christof Marti (chrmarti)
previously approved these changes
Sep 3, 2026
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>
Justin Chen (justschen)
dismissed stale reviews from Christof Marti (chrmarti) and Giuseppe Cianci (Giuspepe)
via
September 3, 2026 08:11
b6a5cd0
Dirk Bäumer (dbaeumer)
previously approved these changes
Sep 3, 2026
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>
Sandeep Somavarapu (sandy081)
approved these changes
Sep 3, 2026
Collaborator
Author
|
my bad on all the approvals - agent marked it ready for review when it wasn't 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
fixes input jumping when attaching and better collapse behavior