From 1bd100374b594060957477a8ccf6c4c17615bd32 Mon Sep 17 00:00:00 2001
From: Logan Ramos <lramos15@gmail.com>
Date: Fri, 25 Jul 2025 15:57:10 -0400
Subject: [PATCH] Show details only on hover (#257896)

* Show details only on hover

* Fix css
---
 .../contrib/chat/browser/chatListRenderer.ts  |  3 ++-
 .../contrib/chat/browser/media/chat.css       | 19 ++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/vs/workbench/contrib/chat/browser/chatListRenderer.ts b/src/vs/workbench/contrib/chat/browser/chatListRenderer.ts
index 6179814176f..cba516ad573 100644
--- a/src/vs/workbench/contrib/chat/browser/chatListRenderer.ts
+++ b/src/vs/workbench/contrib/chat/browser/chatListRenderer.ts
@@ -419,7 +419,8 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 			}
 		}));
 
-		const footerDetailsContainer = dom.append(rowContainer, $('.chat-footer-details'));
+		// Insert the details container into the toolbar's internal element structure
+		const footerDetailsContainer = dom.append(footerToolbar.getElement(), $('.chat-footer-details'));
 
 		const checkpointRestoreContainer = dom.append(rowContainer, $('.checkpoint-restore-container'));
 		const codiconRestoreContainer = dom.append(checkpointRestoreContainer, $('.codicon-container'));
diff --git a/src/vs/workbench/contrib/chat/browser/media/chat.css b/src/vs/workbench/contrib/chat/browser/media/chat.css
index 43e32512912..6797af7fea9 100644
--- a/src/vs/workbench/contrib/chat/browser/media/chat.css
+++ b/src/vs/workbench/contrib/chat/browser/media/chat.css
@@ -204,17 +204,30 @@
 	visibility: visible;
 }
 
+/* Style the internal toolbar element to use flexbox */
+.interactive-item-container .chat-footer-toolbar .monaco-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .interactive-item-container .chat-footer-details {
-	display: block;
-	padding: 4px 0 2px 0;
+	display: none;
+	padding: 0;
 	font-size: 11px;
 	opacity: 0.7;
 	color: var(--vscode-descriptionForeground);
 	line-height: 16px;
+	margin-left: auto;
+}
+
+/* Show details only on hover of the footer toolbar */
+.interactive-item-container.interactive-response:not(.chat-response-loading) .chat-footer-toolbar:hover .chat-footer-details {
+	display: block;
 }
 
 .interactive-item-container .chat-footer-details.hidden {
-	display: none;
+	display: none !important;
 }
 
 .interactive-item-container .value {