Skip to content

Fix button border styles for disabled state and split buttons #8410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrleemurray merged 1 commit into from
Jan 21, 2026
+3 −1
Merged

Fix button border styles for disabled state and split buttons #8410

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion webviews/common/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ input[type='checkbox'] {
body button:disabled,
input[type='submit']:disabled {
opacity: 0.4;
border: 1px solid var(--vscode-button-border, transparent) !important;
border: 1px solid var(--vscode-button-background, transparent) !important;
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using --vscode-button-background for border styling is semantically incorrect. The variable --vscode-button-background is intended for background colors, not borders. This could cause visual inconsistencies in themes where these variables have different color values. Consider using --vscode-button-border if the goal is to maintain a border, or removing the border entirely for disabled buttons with border: 1px solid transparent !important;.

Suggested change
border: 1px solid var(--vscode-button-background, transparent) !important;
border: 1px solid var(--vscode-button-border, transparent) !important;

Copilot uses AI. Check for mistakes.
}

body .hidden {
Expand Down Expand Up @@ -396,6 +396,8 @@ button.split-left {

.split.disabled {
opacity: 0.4;
border-top: 1px solid var(--vscode-button-background);
border-bottom: 1px solid var(--vscode-button-background);
Comment on lines +399 to +400
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using --vscode-button-background for border styling is semantically incorrect. The non-disabled .split class uses --vscode-button-border for its top and bottom borders (lines 386-387), so the disabled state should maintain the same semantic variable usage. Consider keeping --vscode-button-border or using a transparent border instead.

Suggested change
border-top: 1px solid var(--vscode-button-background);
border-bottom: 1px solid var(--vscode-button-background);
border-top: 1px solid var(--vscode-button-border);
border-bottom: 1px solid var(--vscode-button-border);

Copilot uses AI. Check for mistakes.
}

.split.secondary {
Expand Down