Fix input box jumping when sending a request

[roblourens]

Changing the display from flex to block forced a reflow/repaint. So keep it flex all the time.
Fix #281469

[Copilot]

Pull request overview

This PR fixes an input box jumping issue that occurred when sending a request in the chat view. The problem was caused by dynamically toggling the display: flex CSS property on the parent container, which forced browser reflows/repaints. The fix moves the display: flex property to always be present on the base .chat-viewpane class and makes the has-sessions-control class permanent, while visibility control is delegated to the sessions container element itself via display: none.

Key changes:

• Always apply display: flex to .chat-viewpane instead of conditionally via .has-sessions-control
• Permanently add has-sessions-control class on initialization instead of toggling it dynamically
• Remove dynamic class toggling logic that caused layout thrashing

Reviewed changes

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

File	Description
src/vs/workbench/contrib/chat/browser/media/chatViewPane.css	Moved display: flex from conditional .has-sessions-control class to base .chat-viewpane class to prevent reflow
src/vs/workbench/contrib/chat/browser/chatViewPane.ts	Added has-sessions-control class permanently on initialization and removed dynamic toggle logic

Comments suppressed due to low confidence (1)

src/vs/workbench/contrib/chat/browser/media/chatViewPane.css:87

• Since the 'has-sessions-control' class is now always added on initialization and never removed, the CSS selector '.chat-viewpane.has-sessions-control' is somewhat misleading. Consider consolidating these styles into the base '.chat-viewpane' selector for better clarity, or add a comment explaining why the selector is structured this way. This would improve code maintainability by making it clear that these styles are always applied.

.chat-viewpane.has-sessions-control {

	.chat-controls-container {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.agent-sessions-container {
		display: flex;
		flex-direction: column;

		.agent-sessions-title-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: var(--vscode-descriptionForeground);
			padding: 8px;

			.agent-sessions-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.agent-sessions-toolbar {

			.action-item {
				/* align with the title actions*/
				margin-right: 4px;
			}

			&.filtered .action-label.codicon.codicon-filter {
				/* indicate when sessions filter is enabled */
				border-color: var(--vscode-inputOption-activeBorder);
				color: var(--vscode-inputOption-activeForeground);
				background-color: var(--vscode-inputOption-activeBackground);
			}
		}

		.agent-sessions-link-container {
			padding: 8px 0;
			font-size: 12px;
			text-align: center;
		}

		.agent-sessions-link-container a {
			color: var(--vscode-descriptionForeground);
		}

		.agent-sessions-link-container a:hover,
		.agent-sessions-link-container a:active {
			text-decoration: none;
			color: var(--vscode-textLink-foreground);
		}
	}

	.interactive-session {

		/* needed so that the chat welcome and chat input does not overflow and input grows over welcome */
		width: 100%;
		min-height: 0;
		min-width: 0;
	}
}

[bpasero]

Can we preserve the notion of .has-sessions-control and try to fix the CSS by moving the relevant pieces up into .chat-viewpane { rule? The semantic should be preserved otherwise future changes will be hard to understand. .has-sessions-control is present if the sessions are showing either stacked or side by side.