Make base branch clickable instead of using edit icon button

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

src/@types/vscode.proposed.chatSessionsProvider.d.ts

@@ -95,6 +95,11 @@ declare module 'vscode' {
 		 */
 		description?: string | MarkdownString;
 
+		/**
+		 * An optional badge that provides additional context about the chat session.
+		 */
+		badge?: string | MarkdownString;
+
 		/**
 		 * An optional status indicating the current state of the session.
 		 */

webviews/components/header.tsx

@@ -275,12 +275,18 @@ function Subtitle({ state, stateReason, isDraft, isIssue, author, base, head, co
 				<div className="merge-branches">
 					<AuthorLink for={author} /> {!isIssue ? (<>
 						{getActionText(state)} into{' '}
-						<code className="branch-tag">{base}</code>
 						{canEdit && state === GithubItemStateEnum.Open ? (
-							<button title="Change base branch" onClick={changeBaseBranch} className="icon-button">
-								{editIcon}
+							<button 
+								title="Change base branch" 
+								onClick={changeBaseBranch} 
+								className="branch-tag branch-tag-button"
+								aria-label="Change base branch"
+							>
+								{base}
 							</button>
-						) : null}
+						) : (
+							<code className="branch-tag">{base}</code>
+						)}
 						{' '}from <code className="branch-tag">{head}</code>
 					</>) : null}
 				</div>

webviews/editorWebview/index.css

@@ -541,6 +541,23 @@ body button .icon {
 	border-radius: 4px;
 }
 
+.branch-tag-button {
+	border: 1px solid transparent;
+	cursor: pointer;
+	font-family: inherit;
+	font-size: inherit;
+}
+
+.branch-tag-button:hover {
+	background: var(--vscode-button-hoverBackground);
+	color: var(--vscode-button-foreground);
+	border-color: var(--vscode-button-border);
+}
+
+.branch-tag-button:active {
+	background: var(--vscode-button-background);
+}
+
 .merge-branches .icon-button {
 	margin-top: 4px;
 }