[cherry-pick] clean up confirmation carousel - no more collapse and better focus logic (#311419)

Co-authored-by: vs-code-engineering[bot] <vs-code-engineering[bot]@users.noreply.github.com>

Author: vs-code-engineering[bot]

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatToolConfirmationCarousel.css

@@ -29,7 +29,16 @@
 	background-color: var(--vscode-panel-background);
 	overflow: hidden;
 
-	&:focus:not(:focus-visible) {
+	&:focus {
+		outline: none !important;
+	}
+
+	&:focus-visible,
+	&:focus-within {
+		border-color: var(--vscode-focusBorder);
+	}
+
+	.chat-tool-carousel-content .chat-confirmation-widget-container:focus {
 		outline: none;
 	}
 
@@ -93,77 +102,57 @@
 		margin-left: auto;
 	}
 
-	button:focus:not(:focus-visible),
-	.monaco-button:focus:not(:focus-visible) {
-		outline: none !important;
-		box-shadow: none !important;
-	}
-
-	.chat-tool-carousel-nav-arrows {
-		display: flex;
-		align-items: center;
-	}
-
-	.monaco-button.chat-tool-carousel-nav-arrow {
+	.monaco-button.chat-tool-carousel-dismiss-button {
 		min-width: 22px;
 		width: 22px;
 		height: 22px;
 		padding: 0;
 		border: none !important;
 		box-shadow: none !important;
 		background: transparent !important;
-		color: var(--vscode-foreground) !important;
+		color: var(--vscode-icon-foreground) !important;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
-	.monaco-button.chat-tool-carousel-nav-arrow:hover:not(.disabled) {
+	.monaco-button.chat-tool-carousel-dismiss-button:hover {
 		background: var(--vscode-toolbar-hoverBackground) !important;
 	}
 
-	.monaco-button.chat-tool-carousel-nav-arrow.disabled {
-		opacity: 0.4;
+	button:focus,
+	.monaco-button:focus {
+		outline: none !important;
+		box-shadow: none !important;
 	}
 
-	.monaco-button.chat-tool-carousel-header-button {
+	.chat-tool-carousel-nav-arrows {
+		display: flex;
+		align-items: center;
+	}
+
+	.monaco-button.chat-tool-carousel-nav-arrow {
 		min-width: 22px;
 		width: 22px;
 		height: 22px;
 		padding: 0;
 		border: none !important;
 		box-shadow: none !important;
 		background: transparent !important;
-		color: var(--vscode-icon-foreground) !important;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		color: var(--vscode-foreground) !important;
 	}
 
-	.monaco-button.chat-tool-carousel-header-button:hover:not(.disabled) {
+	.monaco-button.chat-tool-carousel-nav-arrow:hover:not(.disabled) {
 		background: var(--vscode-toolbar-hoverBackground) !important;
 	}
 
-	&.chat-tool-carousel-content-expanded {
-		max-height: min(650px, 70vh);
+	.monaco-button.chat-tool-carousel-nav-arrow.disabled {
+		opacity: 0.4;
 	}
 
-	&.chat-tool-carousel-collapsed {
-		.chat-tool-carousel-content {
-			display: none;
-		}
-
-		.chat-tool-carousel-overlay {
-			padding: 6px 10px 6px 12px;
-			border-bottom: none;
-		}
-
-		.chat-tool-carousel-title-group {
-			flex: 1;
-		}
-
-		.chat-tool-carousel-nav-arrows,
-		.chat-tool-carousel-step-indicator {
-			display: none;
-		}
+	.monaco-list:focus {
+		outline: none !important;
 	}
 
 	.chat-tool-carousel-content {
@@ -230,12 +219,6 @@
 			background-color: var(--vscode-sideBar-background);
 		}
 
-		.chat-tool-carousel-content-expanded & {
-			.chat-confirmation-widget-message {
-				max-height: min(500px, 55vh);
-			}
-		}
-
 		.chat-buttons-container {
 			flex-shrink: 0;
 		}