pivot to element visibility approach

Author: eli-w-king

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

@@ -2824,6 +2824,7 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		welcomeOffset = Math.max(welcomeOffset - this.input.attachmentsHeight, 0);
 		this.welcomeMessageContainer.style.height = `${contentHeight - welcomeOffset}px`;
 		this.welcomeMessageContainer.style.paddingBottom = `${welcomeOffset}px`;
+		this.updateWelcomeElementVisibility(contentHeight - welcomeOffset);
 
 		this.renderer.layout(width);
 
@@ -2836,6 +2837,54 @@ export class ChatWidget extends Disposable implements IChatWidget {
 		this._onDidChangeHeight.fire(height);
 	}
 
+	private updateWelcomeElementVisibility(availableHeight: number): void {
+		const container = this.welcomeMessageContainer;
+		if (!container || container.offsetHeight === 0) {
+			return;
+		}
+
+		const suggestedPrompts = container.querySelector<HTMLElement>('.chat-welcome-view-suggested-prompts');
+		if (!suggestedPrompts) {
+			return;
+		}
+
+		if (this.container.classList.contains('new-welcome-view')) {
+			return;
+		}
+
+		const selectors = [
+			'.chat-welcome-history-root',
+			'.chat-welcome-view-message',
+			'.chat-welcome-view-disclaimer',
+			'.chat-welcome-view-title',
+			'.chat-welcome-view-icon'
+		];
+
+		const elements = selectors
+			.map(sel => container.querySelector<HTMLElement>(sel))
+			.filter((el): el is HTMLElement => el !== null);
+
+		elements.forEach(el => {
+			if (el.style.display === 'none') {
+				el.style.display = '';
+			}
+		});
+
+		const suggestedPromptsHeight = suggestedPrompts.offsetHeight;
+		const adjustedAvailableHeight = availableHeight - suggestedPromptsHeight;
+
+		let totalHeight = 0;
+		for (const elem of elements) {
+			if (elem.style.display !== 'none') {
+				totalHeight += elem.offsetHeight;
+				if (totalHeight > adjustedAvailableHeight) {
+					elem.style.display = 'none';
+					totalHeight -= elem.offsetHeight;
+				}
+			}
+		}
+	}
+
 	private _dynamicMessageLayoutData?: { numOfMessages: number; maxHeight: number; enabled: boolean };
 
 	// An alternative to layout, this allows you to specify the number of ChatTreeItems

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

@@ -395,33 +395,3 @@ div.chat-welcome-view {
 	word-wrap: break-word;
 }
 
-/* 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)) {
-		@media (max-height: 760px), (max-width: 620px) {
-			div.chat-welcome-view > .chat-welcome-view-title { display: none; }
-		}
-
-		@media (max-height: 720px), (max-width: 580px) {
-			div.chat-welcome-view > .chat-welcome-view-icon { display: none; }
-		}
-
-		@media (max-height: 680px), (max-width: 540px) {
-			div.chat-welcome-view > .chat-welcome-view-disclaimer { display: none; }
-		}
-
-		@media (max-height: 640px), (max-width: 500px) {
-			div.chat-welcome-view > :is(
-				.chat-welcome-view-message,
-				.chat-welcome-new-view-message,
-				.chat-welcome-view-additional-message
-			) { display: none; }
-		}
-
-		@media (max-height: 520px), (max-width: 360px) {
-			> .chat-welcome-history-root { display: none; }
-		}
-	}
-}
-