Show details only on hover (microsoft#257896)

* Show details only on hover

* Fix css

Author: lramos15

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'));

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 {