Fix chat prompt pills expanding to 100% width in suggested actions

[Copilot]

Problem

Prompt pills under "Suggested Actions" in the chat welcome view were expanding to 100% width instead of maintaining their natural fit-content width. This was caused by several CSS flexbox issues:

1. Missing horizontal spacing - Container only had row-gap: 8px without column-gap, relying on per-pill margins
2. Unintended flex expansion - Description element used flex: 1, causing pills to grow and fill available space
3. Missing flex constraints - Pills lacked flex: 0 0 auto to prevent growth in the flex container

Solution

Applied minimal CSS fixes to maintain natural pill width while ensuring consistent spacing:

/* Container - use gap shorthand for consistent spacing */
.chat-welcome-view-suggested-prompts {
  gap: 8px; /* Was: row-gap: 8px */
}

/* Pills - prevent expansion, remove margins */
> .chat-welcome-view-suggested-prompt {
  margin: 0; /* Was: margin: 0 4px */
  flex: 0 0 auto; /* Added */
}

/* Description - allow shrinking but not growing */
.chat-welcome-view-suggested-prompt-description {
  flex: 0 1 auto; /* Was: flex: 1 */
}

Result

• Pills now maintain their natural fit-content width based on content length
• Consistent 8px spacing in all directions using modern CSS gap property
• Works correctly with pills that have or don't have descriptions
• Compatible with both regular and new welcome view modes

Screenshot

The screenshot demonstrates:

• ❌ BEFORE (Blue Border): Pills expand to fill available space
• ✅ AFTER (Green Border): Pills maintain natural width with proper spacing
• 📊 Constrained Container Test: Shows consistent behavior in narrow layouts

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Chat prompt pills expanding to 100% width in Suggested Actions</issue_title>
<issue_description>## Problem
Prompt pills under "Suggested Actions" in the chat welcome view are expanding to 100% width instead of maintaining their natural fit-content width.

Root Causes

1. Missing column-gap - Container uses row-gap: 8px but lacks column-gap, relying on per-pill margins
2. Flex expansion - Description element has flex: 1 causing unexpected width expansion
3. Pills lack flex constraints - No flex: 0 0 auto to prevent growth

Affected Files

• src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css (lines 185-265)

Proposed Fix

1. Add column-gap: 8px to .chat-welcome-view-suggested-prompts container
2. Remove horizontal margins from .chat-welcome-view-suggested-prompt pills (change margin: 0 4px to margin: 0)
3. Add flex: 0 0 auto to .chat-welcome-view-suggested-prompt to prevent expansion
4. Change flex: 1 to flex: 0 1 auto on .chat-welcome-view-suggested-prompt-description

Testing

• Verify pills maintain fit-content width with varying text lengths
• Test with and without descriptions
• Test in both regular and new welcome view modes</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #269394

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Copilot]

Pull Request Overview

This PR fixes prompt pills in the chat welcome view's "Suggested Actions" section that were incorrectly expanding to 100% width instead of maintaining their natural fit-content width. The fix addresses CSS flexbox issues related to spacing, flex expansion, and container constraints.

Key Changes:

• Updated CSS flexbox properties to prevent pill expansion and ensure proper spacing
• Added adaptive compression system for responsive welcome view layout
• Improved spacing consistency using modern CSS gap property

Reviewed Changes

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

File	Description
src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css	Fixed flexbox CSS properties for prompt pills, updated spacing, and added adaptive compression styles
src/vs/workbench/contrib/chat/browser/chatWidget.ts	Added ResizeObserver-based adaptive compression system for welcome view layout

[Copilot]

Changing max-width from 260px to 100% removes the previous constraint that limited pill width. This could allow pills with very long text to become excessively wide. Consider keeping a reasonable maximum width (e.g., max-width: min(260px, 100%)) to maintain readability while allowing flexibility.

Suggested change

	max-width: 100%;
	max-width: min(260px, 100%);

[Copilot]

Magic numbers should be defined as named constants at the class or module level rather than as local constants. This makes them easier to maintain and understand their purpose across the codebase.

[eli-w-king]

Screen.Recording.2025-10-02.at.2.14.47.PM.mov

[eli-w-king]

Continued in #269791