Change:
You can see in the image that the split part doesn't look right. FYI my theme is ! /cc
//cc
I think this might be another style issue with the button border since the separator container use the full height: <img width="430" alt="CleanShot 2022-07-20 at 10 56 10 src="https://user-"If you don't set a border it looks normal: <img width="237" alt="CleanShot 2022-07-20 at 10 54 13 src="https://user-"
thanks for tracking this down. I will try to squeeze a fix in this week.

Discussion:
opacity: 0.4 !important; } <ins> .monaco-button-dropdown > .monaco-button.monaco-text-button { border-right-width: 0 !important; } </ins> .monaco-button-dropdown .monaco-button-dropdown-separator { padding: 4px 0; cursor: default;

width: 1px; } <ins> .monaco-button-dropdown > .monaco-button.monaco-dropdown-button { border-left-width: 0 !important; } </ins> .monaco-description-button { flex-direction: column; }

this.dropdownButton.style(styles); // Separator <ins> const border = styles.buttonBorder ? styles.buttonBorder.toString() : ''; this.separatorContainer.style.borderTopWidth = border ? '1px' : ''; this.separatorContainer.style.borderTopStyle = border ? 'solid' : ''; this.separatorContainer.style.borderTopColor = border; this.separatorContainer.style.borderBottomWidth = border ? '1px' : ''; this.separatorContainer.style.borderBottomStyle = border ? 'solid' : ''; this.separatorContainer.style.borderBottomColor = border; </ins> this.separatorContainer.style.backgroundColor = styles.buttonBackground?.toString() ?? ''; this.separator.style.backgroundColor = styles.buttonSeparator?.toString() ?? ''; }

export const checkboxBorder = registerColor('checkbox.border', { dark: selectBorder, light: selectBorder, hcDark: selectBorder, hcLight: selectBorder }, nls.localize('checkbox.border', "Border color of checkbox widget.")); export const buttonForeground = registerColor('button.foreground', { dark: Color.white, light: Color.white, hcDark: Color.white, hcLight: Color.white }, nls.localize('buttonForeground', "Button foreground color.")); <del> export const buttonSeparator = registerColor('button.separator', { dark: transparent(buttonForeground, .4), light: transparent(buttonForeground, .4), hcDark: null, hcLight: transparent(buttonForeground, .4) }, nls.localize('buttonSeparator', "Button separator color.")); </del> <ins> export const buttonSeparator = registerColor('button.separator', { dark: transparent(buttonForeground, .4), light: transparent(buttonForeground, .4), hcDark: transparent(buttonForeground, .4), hcLight: transparent(buttonForeground, .4) }, nls.localize('buttonSeparator', "Button separator color.")); </ins> export const buttonBackground = registerColor('button.background', { dark: '#0E639C', light: '#007ACC', hcDark: null, hcLight: '#0F4A85' }, nls.localize('buttonBackground', "Button background color.")); export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hcDark: null, hcLight: null }, nls.localize('buttonHoverBackground', "Button background color when hovering.")); export const buttonBorder = registerColor('button.border', { dark: contrastBorder, light: contrastBorder, hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('buttonBorder', "Button border color."));