Question carousel UI polish

[daviddossett]

Visual polish and behavior fixes for the question carousel widget.

@meganrogge

Changes

Styling

• Border radius matches chat input (cornerRadius-large)
• Background uses panel background
• Option list items use cornerRadius-medium
• Footer padding: 8px left, 16px right
• 12px gap between number and labels
• Freeform custom answer row aligned with preset options
• Close button vertically centered in titlebar
• Number elements use consistent width (min-width/text-align)
• Tighter gap between presets and custom answer field

Layout

• has-description class distinguishes items with title + description from single-line items
• Checkboxes center-aligned with title row in description items
• Numbers aligned with title row in description items
• Focus outline consistent across all list items (no special case for selected)

Content

• Removed : prefix from option descriptions
• Summary Q/A always rendered on separate rows

Behavior

• Hide submit icon when carousel is open (show stop only)
• Show submit icon when user types text to steer

Outstanding issues not yet fixed by this PR

• Does not fix the min-height/janking on the carousel on initial render and navigating between steps
• Does not yet resolve keyboard nav on multiple-choice checkbox question formats

[Copilot]

Pull request overview

UI/behavior polish for the chat question carousel widget, aligning styling with current VS Code tokens and improving navigation/submit affordances when a carousel is present.

Changes:

• Updates carousel styling (radius, padding, footer layout, option alignment) and adds a has-description layout variant.
• Refactors multi-question navigation footer (persistent footer with step indicator, submit hint, and submit button shown only on last step).
• Adjusts execute/submit action visibility so the Send (submit) icon is hidden while a carousel is open unless the user has typed input.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css	Visual/layout updates for carousel container, list items, footer, and summary rendering.
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatQuestionCarouselPart.ts	Refactors carousel header/footer rendering and keyboard handling; adjusts summary markup to Q/A rows.
src/vs/workbench/contrib/chat/browser/actions/chatExecuteActions.ts	Context-key conditions to hide/show submit icon based on carousel presence and input text.

Comments suppressed due to low confidence (1)

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css:444

• The summary markup now renders answers/unanswered states using .chat-question-summary-answer and .chat-question-summary-unanswered, but the CSS still only styles the old .chat-question-summary-answer-title/.chat-question-summary-answer-desc selectors. Update the summary styles to target the new class names (and consider removing the now-dead selectors) so the summary text keeps the intended emphasis/colors.

	.chat-question-summary-item {
		display: flex;
		flex-direction: column;
		gap: 0;
		font-size: var(--vscode-chat-font-size-body-s);
	}

	.chat-question-summary-label {
		color: var(--vscode-descriptionForeground);
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.chat-question-summary-answer-title {
		color: var(--vscode-foreground);
		font-weight: 600;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.chat-question-summary-answer-desc {
		color: var(--vscode-foreground);
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

[meganrogge]

Works well for me, thanks!