Align chat title container with centered interactive-session content

[Copilot]

The chat title and toolbar were left-aligned while .interactive-session content was centered with max-width: 950px. This created visual misalignment when the chat view is wide.

Applied matching constraints to .chat-view-title-container:

• max-width: 950px to match .interactive-session
• margin-left: auto; margin-right: auto for centering
• width: 100% to fill available space before max-width applies

Before: Title left-aligned, content centered

After: Title and content aligned (per @benibenj's suggestion)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Centered shadow in chat view looks odd</issue_title>
<issue_description>Testing #290241

The title on the top left also looks strange:

This happens in the regular chat sidebar but I don't normally have it that wide there:

I think ideally the scrollable area would be the width of the container and inside the scrollable would be a max-width container holding the content. That would mean the scroll bar would be attached to the right edge and the shadow would extend out to the edges</issue_description>

<agent_instructions>The chat title and tool bar which are in one container should have the same max width as the .interactive-session. Also make sure it is cantered the same way as .interactive-session</agent_instructions>

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

@bpasero Not a new issue, and maybe duplicate.

I am also assigning @benibenj to see if he could help out here with the suggestion you made.</comment_new>
<comment_new>@roblourens

I think ideally the scrollable area would be the width of the container and inside the scrollable would be a max-width container holding the content.

I would definitely prefer this but it's impossible without making invasive changes to the list. Same problem in settings editor. There are other issues for this somewhere.</comment_new>
<comment_new>@benibenj
I'm not sure that having the shadow span the entire width is a good option. I don't think it would look nice and having the scrollbar far away from the actual content is also a bit unpractical.

A different idea could be to move the chat title and actions into the max width area like this:

</comment_new>
<comment_new>@bpasero
I like that!</comment_new>

• Fixes Centered shadow in chat view looks odd #290928

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Copilot]

Pull request overview

Aligns the chat view’s title/toolbar area with the centered .interactive-session content to avoid visual misalignment in wide chat views.

Changes:

• Adds a max-width constraint intended to match the chat content width (950px)
• Centers the affected container via auto margins

Comments suppressed due to low confidence (1)

src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatViewPane.css:19

• margin: auto sets auto margins on all four sides. Because .chat-controls-container is a flex item (its parent is .chat-viewpane which can be flex-direction: column or row), this can interfere with stretching and can absorb free space on the main axis. If the intent is only horizontal centering, use left/right auto margins explicitly and set width: 100% so the container fills available space before max-width clamps it.

		max-width: 950px;
		margin: auto;

[Copilot]

This change applies max-width/centering to .chat-controls-container, which constrains the entire chat pane (including the widget) rather than just the title container described in the PR. In side-by-side sessions layout (.chat-viewpane.has-sessions-control.sessions-control-orientation-sidebyside switches to flex-direction: row), this will cap the chat area to 950px and center it, likely leaving unused space and misaligning with the sessions column. Consider keeping .chat-controls-container full-width and instead applying the max-width + horizontal centering to the title container (and/or an inner wrapper that contains the title + .interactive-session).