[cherry-pick] fix styling of session header and chat content (microsoft#320457)

Co-authored-by: vs-code-engineering[bot] <vs-code-engineering[bot]@users.noreply.github.com>

Author: vs-code-engineering[bot]

src/vs/sessions/browser/media/style.css

@@ -502,19 +502,12 @@
  * surfaces that reuse `.interactive-item-container` — notably the terminal
  * and editor inline chat widgets and the agent-session hover widget. */
 .agent-sessions-workbench .part.sessionspart .interactive-session .interactive-item-container,
-.agent-sessions-workbench .chat-editor-relative .interactive-session .interactive-item-container {
-	max-width: 950px;
-	margin: 0 auto;
-	padding-left: 12px;
-	padding-right: 12px;
-	box-sizing: border-box;
-}
-
+.agent-sessions-workbench .chat-editor-relative .interactive-session .interactive-item-container,
 .agent-sessions-workbench .part.sessionspart .interactive-session > .chat-suggest-next-widget,
 .agent-sessions-workbench .chat-editor-relative .interactive-session > .chat-suggest-next-widget {
 	max-width: 950px;
 	margin: 0 auto;
-	padding-left: 12px;
+	padding-left: 32px;
 	padding-right: 12px;
 	box-sizing: border-box;
 }
@@ -579,8 +572,7 @@
 	max-width: 950px;
 	margin: 0 auto;
 	display: inherit;
-	/* Align with panel (terminal) card margin */
-	padding: 4px 10px;
+	padding: 4px 10px 4px 32px;
 	box-sizing: border-box;
 }
 

src/vs/sessions/browser/parts/media/chatCompositeBar.css

@@ -15,18 +15,13 @@
 /* Header host: title row + meta row, with the top padding for the whole bar area */
 .chat-composite-bar.session-header-bar {
 	padding: 6px 10px 0;
-	max-width: 990px;
-	margin: 0 auto;
 	box-sizing: border-box;
 }
 
 /* Tabs host: the chat tab strip, shown only when the session has multiple chats.
-	Mirrors the header's max-width and centering so the tabs line up horizontally
-	with the session header above them. */
+	It lives in the same centered session-view content host as the header. */
 .chat-composite-bar.session-chat-tabs-bar {
 	padding: 0 10px;
-	max-width: 990px;
-	margin: 0 auto;
 	box-sizing: border-box;
 	container-type: inline-size;
 }

src/vs/sessions/browser/parts/media/sessionView.css

@@ -12,6 +12,14 @@
  * across the multi-session grid so attention stays on the active session.
  * ------------------------------------------------------------------------- */
 
+/* Session header, tabs, and chat content are all hosted in this centered
+ * inner container so alignment is controlled in one place. */
+.session-view .session-view-centered-content {
+	height: 100%;
+	margin: 0 auto;
+	box-sizing: border-box;
+}
+
 /* Transitions apply to both active and inactive states so controls fade
  * smoothly in either direction. Only declared when the user has not requested
  * reduced motion so we never need to unset them. */

src/vs/sessions/browser/parts/media/sessionsPart.css

@@ -15,7 +15,7 @@
 }
 
 .monaco-workbench .part.sessionspart .session-view,
-.monaco-workbench .part.sessionspart .session-view > .session-view-content {
+.monaco-workbench .part.sessionspart .session-view .session-view-content {
 	background-color: var(--session-view-background);
 	color: var(--session-view-foreground);
 	position: relative;

src/vs/sessions/browser/parts/sessionView.ts

@@ -35,6 +35,7 @@ import { SessionStatus } from '../../services/sessions/common/session.js';
 export class SessionView extends Disposable implements ISerializableView {
 
 	static readonly TYPE = 'sessions.sessionView';
+	private static readonly CENTERED_CONTENT_MAX_WIDTH = 950;
 	private static readonly ACTIVE_BACKGROUND = asCssVariable(activeSessionViewBackground);
 	private static readonly ACTIVE_FOREGROUND = asCssVariable(activeSessionViewForeground);
 	private static readonly INACTIVE_BACKGROUND = asCssVariable(inactiveSessionViewBackground);
@@ -53,6 +54,7 @@ export class SessionView extends Disposable implements ISerializableView {
 	private readonly _header: SessionHeader;
 	private readonly _compositeBar: ChatCompositeBar;
 	private readonly _floatingToolbar: SessionViewFloatingToolbar;
+	private readonly _centeredContentContainer: HTMLElement;
 	private readonly _contentContainer: HTMLElement;
 
 	private readonly _currentView = this._register(new MutableDisposable<AbstractChatView>());
@@ -95,14 +97,17 @@ export class SessionView extends Disposable implements ISerializableView {
 
 		const scopedInstantiationService = this._register(instantiationService.createChild(new ServiceCollection([IContextKeyService, scopedContextKeyService])));
 
+		this._centeredContentContainer = $('.session-view-centered-content');
+		this.element.appendChild(this._centeredContentContainer);
+
 		this._header = this._register(scopedInstantiationService.createInstance(SessionHeader));
-		this.element.appendChild(this._header.element);
+		this._centeredContentContainer.appendChild(this._header.element);
 
 		this._compositeBar = this._register(scopedInstantiationService.createInstance(ChatCompositeBar));
-		this.element.appendChild(this._compositeBar.element);
+		this._centeredContentContainer.appendChild(this._compositeBar.element);
 
 		this._contentContainer = $('.session-view-content');
-		this.element.appendChild(this._contentContainer);
+		this._centeredContentContainer.appendChild(this._contentContainer);
 
 		this._floatingToolbar = this._register(scopedInstantiationService.createInstance(SessionViewFloatingToolbar));
 		this.element.appendChild(this._floatingToolbar.element);
@@ -205,10 +210,13 @@ export class SessionView extends Disposable implements ISerializableView {
 			return;
 		}
 		const { width, height, top, left } = this._lastLayout;
+		const centeredWidth = Math.min(width, SessionView.CENTERED_CONTENT_MAX_WIDTH);
+		const centeredLeft = left + (width - centeredWidth) / 2;
+		size(this._centeredContentContainer, centeredWidth, height);
 		const headerHeight = this._header.visible ? this._header.height : 0;
 		const tabsHeight = this._compositeBar.visible ? this._compositeBar.height : 0;
 		const barHeight = headerHeight + tabsHeight;
-		this._currentView.value?.layout(width, height - barHeight, top + barHeight, left);
+		this._currentView.value?.layout(centeredWidth, height - barHeight, top + barHeight, centeredLeft);
 	}
 
 	toJSON(): object {

src/vs/sessions/contrib/aquarium/browser/media/aquarium.css

@@ -25,7 +25,7 @@
  * `--session-view-background` on top of the water layer and hide everything.
  * Clear those backgrounds so the fish are visible behind the chat content. */
 .monaco-workbench .part.sessionspart.aquarium-active .session-view,
-.monaco-workbench .part.sessionspart.aquarium-active .session-view > .session-view-content {
+.monaco-workbench .part.sessionspart.aquarium-active .session-view .session-view-content {
 	background-color: transparent;
 }