Improve button and branch tag styling (#8369)

* Update styling for branch tag and change base button in CSS

* Enhance button styles with borders for better visibility

* Update webviews/editorWebview/index.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update webviews/editorWebview/index.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update webviews/common/common.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update webviews/common/common.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update webviews/common/common.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: mrleemurray <lee.murray@microsoft.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

webviews/common/common.css

@@ -74,6 +74,7 @@ input[type='submit']:hover:enabled {
 button.secondary {
 	background-color: var(--vscode-button-secondaryBackground);
 	color: var(--vscode-button-secondaryForeground);
+	border-color: var(--vscode-button-border, transparent);
 }
 
 button.secondary:hover:enabled,
@@ -141,6 +142,7 @@ input[type='checkbox'] {
 body button:disabled,
 input[type='submit']:disabled {
 	opacity: 0.4;
+	border: 1px solid var(--vscode-button-border, transparent) !important;
 }
 
 body .hidden {
@@ -375,6 +377,8 @@ button.split-left {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	display: flex;
+	border: 1px solid var(--vscode-button-border, transparent);
+	border-right: none;
 }
 
 .split {
@@ -405,8 +409,9 @@ button.split-right {
 	cursor: pointer;
 	width: 24px;
 	position: relative;
+	border: 1px solid var(--vscode-button-border, transparent);
+	border-left: none;
 }
-
 button.split-right:disabled {
 	cursor: default;
 }

webviews/editorWebview/index.css

@@ -543,8 +543,8 @@ body button .icon {
 }
 
 .branch-tag {
-	margin-top: 3px;
-	padding: 2px 4px;
+	margin-top: 0;
+	padding: 4px;
 	background: var(--vscode-editorInlayHint-background);
 	color: var(--vscode-editorInlayHint-foreground);
 	border-radius: 4px;
@@ -582,10 +582,18 @@ small-button {
 button.secondary.change-base {
 	background-color: transparent;
 	padding: unset;
+	border-radius: 4px;
+	margin-top: 2px;
 }
 
 .change-base code {
 	display: flex;
+	align-items: center;
+	padding: 2px 4px;
+}
+
+.change-base .icon {
+	margin-left: 4px;
 }
 
 :not(.status-item)>.small-button {