Show details only on hover (#257896)

* Show details only on hover

* Fix css
This commit is contained in:
Logan Ramos
2025-07-25 15:57:10 -04:00
committed by GitHub
parent 03925aa0b9
commit 1bd100374b
2 changed files with 18 additions and 4 deletions
@@ -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'));
@@ -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 {