Responsive chat panel (dynamic compression) #269791

eli-w-king · 2025-10-03T22:44:53Z

CSS solution for responsive chat panel

Screen.Recording.2025-10-03.at.3.42.59.PM.mov

Co-authored-by: digitarald <[email protected]>

Copilot

Pull Request Overview

This PR implements a CSS solution to improve the responsiveness of the chat panel's welcome view by preventing content overlap at various screen sizes and viewport dimensions.

Updates flexbox properties and spacing for better responsive layout behavior
Adds progressive media queries that hide non-essential welcome content at smaller viewport sizes
Changes "Chat history..." text to "More history..." for brevity

Reviewed Changes

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

File	Description
`src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css`	Implements responsive CSS with media queries and updates flexbox layout for suggested prompts
`src/vs/workbench/contrib/chat/browser/chatWidget.ts`	Updates history link text from "Chat history..." to "More history..."

Copilot · 2025-10-03T22:48:31Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+/* Responsive fallbacks to avoid overlapping welcome content */
+
+@media screen and (max-height: 760px), screen and (max-width: 620px) {
+	.interactive-session:not(:has(.chat-welcome-view-icon .codicon-send-to-remote-agent)) .chat-welcome-view-container:has(.chat-welcome-view-suggested-prompts > .chat-welcome-view-suggested-prompt:nth-of-type(2)) div.chat-welcome-view > .chat-welcome-view-title {


The CSS selector is extremely complex and nested, making it difficult to maintain. Consider breaking this into smaller, more specific classes or using CSS custom properties to simplify the targeting logic.

Copilot · 2025-10-03T22:48:32Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+
+/* Responsive fallbacks to avoid overlapping welcome content */
+
+@media screen and (max-height: 760px), screen and (max-width: 620px) {


The media query breakpoints use magic numbers without explanation. Consider defining these breakpoints as CSS custom properties with descriptive names to improve maintainability and make the responsive design intent clearer.

Copilot · 2025-10-03T22:48:32Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+	}
+}
+
+@media screen and (max-height: 720px), screen and (max-width: 580px) {


The media query breakpoints use magic numbers without explanation. Consider defining these breakpoints as CSS custom properties with descriptive names to improve maintainability and make the responsive design intent clearer.

Copilot · 2025-10-03T22:48:32Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+	}
+}
+
+@media screen and (max-height: 680px), screen and (max-width: 540px) {


The media query breakpoints use magic numbers without explanation. Consider defining these breakpoints as CSS custom properties with descriptive names to improve maintainability and make the responsive design intent clearer.

Copilot · 2025-10-03T22:48:32Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+	}
+}
+
+@media screen and (max-height: 640px), screen and (max-width: 500px) {


The media query breakpoints use magic numbers without explanation. Consider defining these breakpoints as CSS custom properties with descriptive names to improve maintainability and make the responsive design intent clearer.

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

joaomoreno · 2025-10-06T12:09:55Z

@eli-w-king @digitarald @bhavyaus we're done with September changes. Moving this out to October...

bhavyaus · 2025-10-10T16:35:38Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+}
+
+@media screen and (max-height: 720px), screen and (max-width: 580px) {
+	.interactive-session:not(.new-welcome-view):not(:has(.chat-welcome-view-icon .codicon-send-to-remote-agent)) .chat-welcome-view-container:has(.chat-welcome-view-suggested-prompts > .chat-welcome-view-suggested-prompt:nth-of-type(2)) div.chat-welcome-view > .chat-welcome-view-icon {


These selectors are very complex. We coul simplify them to target just the specific elements (.chat-welcome-view-icon, .chat-welcome-view-disclaimer, etc.).

The screen qualifier isn’t needed here since it’s the default I think.

Also, how are we choosing the max-height and max-width breakpoints?

bpasero

Overall I wonder if we couldn't achieve this easily without CSS (which comes at a cost) by simply updating the visibility of elements from within our layout call, where we know exactly what kind of height and width the view gets:

vscode/src/vs/workbench/contrib/chat/browser/chatWidget.ts

Line 2598 in 79ff550

layout(height: number, width: number): void {

bpasero · 2025-10-13T07:55:57Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

-			font-size: 14px;
-			font-weight: 600;
+			font-size: 13px;
+			font-weight: 500;


Can we remove use of font-weight altogether? I think it still works without it well given the color.

bpasero · 2025-10-13T07:58:26Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+
+/* Responsive fallbacks to avoid overlapping welcome content */
+
+.interactive-session:not(.new-welcome-view):not(:has(.chat-welcome-view-icon .codicon-send-to-remote-agent)) {


I am a bit worried about the perf of this selector, is there a way we can avoid :has that seems to check on every child element recursively?

+1. We've already broken down the selector for new-welcome-view etc above. Most of these can be nested under there.

bpasero · 2025-10-13T07:58:38Z

src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css

+/* Responsive fallbacks to avoid overlapping welcome content */
+
+.interactive-session:not(.new-welcome-view):not(:has(.chat-welcome-view-icon .codicon-send-to-remote-agent)) {
+	.chat-welcome-view-container:has(.chat-welcome-view-suggested-prompts > .chat-welcome-view-suggested-prompt:nth-of-type(2)) {


eli-w-king · 2025-10-15T17:35:06Z

Revised prompt width and styling here: #271399

vs-code-engineering · 2025-10-22T16:29:36Z

Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our issue reporting guidelines. Please take the time to review these and update the issue.

For Copilot Issues, be sure to visit our Copilot-specific guidelines page for details on the necessary information.

Happy Coding!

bpasero

I would suggest to revisit this in November 🙏

Copilot AI and others added 7 commits October 1, 2025 17:15

Initial plan

6730ec4

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

401e0eb

Co-authored-by: digitarald <[email protected]>

Optimize CSS: use shorthand 'gap' property

7b1ac86

Co-authored-by: digitarald <[email protected]>

Fixed max-width

dd92196

adjusted padding

29fda41

responsive empty state text

8aace97

fixed collapse sequence, limited to chat panel with prompts

94f5f74

eli-w-king assigned eli-w-king, digitarald and bhavyaus Oct 3, 2025

Merge branch 'main' into eli/prompt-overlap

84822ac

eli-w-king marked this pull request as ready for review October 3, 2025 22:46

Copilot AI review requested due to automatic review settings October 3, 2025 22:46

eli-w-king added ux User experience issues chat labels Oct 3, 2025

eli-w-king added this to the September 2025 milestone Oct 3, 2025

eli-w-king mentioned this pull request Oct 3, 2025

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

Closed

eli-w-king enabled auto-merge October 3, 2025 22:47

Copilot AI reviewed Oct 3, 2025

View reviewed changes

eli-w-king added 3 commits October 3, 2025 15:52

removed !important

df8b42c

excludes pre-install welcome view

1ae0fce

Merge branch 'main' into eli/prompt-overlap

d20249c

joaomoreno modified the milestones: September 2025, October 2025 Oct 6, 2025

eli-w-king added 3 commits October 7, 2025 10:55

Merge branch 'main' into eli/prompt-overlap

c67ee31

removed / from prompt tile title

1c04d0d

reduced title font size to 13px, workbench standard

6e04bec

eli-w-king requested review from bhavyaus and digitarald October 7, 2025 18:37

eli-w-king requested a review from bpasero October 9, 2025 21:59

bhavyaus reviewed Oct 10, 2025

View reviewed changes

eli-w-king added 3 commits October 10, 2025 15:04

simplified responsive selectors, removed screen qualifier

1b88fed

further simplified

bd90b62

Merge branch 'main' into eli/prompt-overlap

01b1176

eli-w-king requested a review from bhavyaus October 10, 2025 22:13

bpasero mentioned this pull request Oct 12, 2025

suggested actions pills are not responses #270955

Closed

Merge branch 'main' into eli/prompt-overlap

15eecda

bpasero requested changes Oct 13, 2025

View reviewed changes

benvillalobos mentioned this pull request Oct 14, 2025

Right click welcome prompts should allow me to configure them #266374

Closed

bpasero linked an issue Oct 15, 2025 that may be closed by this pull request

Chat placeholder not responsive to smaller height windows #271528

Closed

bpasero mentioned this pull request Oct 15, 2025

Chat placeholder not responsive to smaller height windows #271528

Closed

eli-w-king changed the title ~~Responsive chat panel css, revised prompt titles~~ Responsive chat panel (dynamic compression) Oct 15, 2025

eli-w-king added 3 commits October 20, 2025 13:04

Merge branch 'main' into eli/prompt-overlap

d8756ae

pivot to element visibility approach

1e1bd82

Merge branch 'main' into eli/prompt-overlap

84e1658

eli-w-king requested a review from bpasero October 20, 2025 21:47

bhavyaus added ~info-needed Issue requires more information from poster (with bot comment) and removed ~info-needed Issue requires more information from poster (with bot comment) labels Oct 22, 2025

vs-code-engineering bot added the info-needed Issue requires more information from poster label Oct 22, 2025

Merge branch 'main' into eli/prompt-overlap

c1efec5

bpasero requested changes Nov 1, 2025

View reviewed changes

bpasero removed the info-needed Issue requires more information from poster label Nov 1, 2025

bpasero modified the milestones: October 2025, November 2025 Nov 1, 2025

bpasero removed request for bhavyaus and digitarald November 1, 2025 19:33

Merge branch 'main' into eli/prompt-overlap

20a639c


		/* Responsive fallbacks to avoid overlapping welcome content */

		@media screen and (max-height: 760px), screen and (max-width: 620px) {


		/* Responsive fallbacks to avoid overlapping welcome content */

		.interactive-session:not(.new-welcome-view):not(:has(.chat-welcome-view-icon .codicon-send-to-remote-agent)) {

Responsive chat panel (dynamic compression) #269791

Are you sure you want to change the base?

Responsive chat panel (dynamic compression) #269791

Conversation

eli-w-king commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joaomoreno commented Oct 6, 2025

Uh oh!

bhavyaus Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bpasero left a comment

Choose a reason for hiding this comment

Uh oh!

bpasero Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

bpasero Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

bhavyaus Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

bpasero Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

eli-w-king commented Oct 15, 2025

Uh oh!

vs-code-engineering bot commented Oct 22, 2025

Uh oh!

bpasero left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

eli-w-king commented Oct 3, 2025 •

edited

Loading

bhavyaus Oct 10, 2025 •

edited

Loading