Refactor chat UI for improved layout and consistency

[mrleemurray]

This pull request updates the chat input and widget CSS to improve layout consistency, responsiveness, and label handling, particularly in narrow viewports. It also changes the send button icon for better clarity. The changes focus on ensuring toolbar and picker elements remain usable and visually aligned as the UI resizes, with improved ellipsis and spacing for long labels.

Screen.Recording.2026-04-20.at.12.58.38.mov

UI and Layout Improvements:

• Adjusted padding, gap, and alignment for .sessions-chat-editor, .sessions-chat-toolbar, and .new-chat-widget-container to improve consistency and anchoring of elements, especially as the viewport narrows [1] [2] [3] [4].
• Updated margins and padding for bottom containers and controls to enhance spacing and alignment [1] [2] [3].

Responsiveness and Label Handling:

• Introduced min-width: 0 and overflow: hidden to multiple flex containers and toolbar elements, allowing labels to ellipsize gracefully when space is tight [1] [2] [3].
• Added container queries to collapse picker labels to icon-only below 330px width, improving usability on small screens.

Toolbar and Picker Styling:

• Standardized font sizes, padding, and icon sizing for action labels and chevrons in toolbars and pickers, ensuring visual consistency and alignment [1] [2] [3].
• Adjusted spacing and sizing for .sessions-chat-dropdown-label and related classes for better overflow handling and alignment [1] [2].

Icon and Visual Tweaks:

• Changed the send button icon from Codicon.send to Codicon.arrowUp for improved clarity.
• Reduced icon font sizes in send and attach buttons for better visual balance [1] [2].
• Ensured consistent sizing and alignment for chevron icons and action items across toolbars [1] [2].

Minor Enhancements:

• Added flex-shrink: 0 to certain elements to prevent unwanted shrinking [1] [2].

These changes collectively make the chat input UI more robust, visually consistent, and user-friendly across different screen sizes.

[Copilot]

Pull request overview

This PR refactors the Sessions chat UI styling to improve alignment/spacing and make picker labels behave better under constrained widths, aiming for a more consistent layout between the input toolbar and the bottom-row controls.

Changes:

• Update the send button icon to use Codicon.arrowUp.
• Left-align/realign chat widget containers and tweak spacing/padding to improve visual consistency.
• Improve overflow handling and responsive behavior (ellipsis + container query) for picker labels/toolbars.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/vs/sessions/contrib/chat/browser/newChatInput.ts	Changes the send button icon to arrowUp.
src/vs/sessions/contrib/chat/browser/media/newChatInSession.css	Left-aligns the chat widget content and tweaks label spacing.
src/vs/sessions/contrib/chat/browser/media/chatWidget.css	Adjusts container alignment/spacing and adds responsive overflow/ellipsis behavior for bottom-row pickers.
src/vs/sessions/contrib/chat/browser/media/chatInput.css	Refines padding/spacing, adds min-width/overflow constraints for toolbars, and aligns icon sizing.

Comments suppressed due to low confidence (1)

src/vs/sessions/contrib/chat/browser/media/chatInput.css:263

• .sessions-chat-attach-button is a custom clickable element (created as a div with role="button"), but it doesn’t set touch-action: manipulation;. Without this, taps can incur the 300ms delay on touch/pointer-event platforms (notably iOS). Add touch-action: manipulation; to this rule to keep touch behavior consistent with the other toolbar/picker triggers.

.sessions-chat-attach-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 4px;
	cursor: pointer;
	color: var(--vscode-icon-foreground);
	background: transparent;
	border: none;
	outline: none;
}

[github-actions]

Screenshot Changes

Base: 8412c237 Current: a645f5ef

Changed (4)

chat/aiCustomizations/aiCustomizationManagementEditor/McpBrowseMode/Dark

Before	After

editor/inlineCompletions/other/JumpToHint/Dark

Before	After

agentSessionsViewer/CompletedUnread/Dark

Before	After

agentSessionsViewer/CompletedUnread/Light

Before	After