Uncentered text/icons when `vscode-button` has a width greater than 300px

[hawkticehurst]

Describe the bug

The button element within the shadow DOM of a vscode-button currently has a max-width of 300px defined.

This means that when a vscode-button has a width of 100% inside a parent container with a width greater than 300px it results in un-centered text/icons.

To reproduce

Add a vscode-button to a div.

Set the vscode-button width to 100% and set the div width to 500px.

Expected behavior

VS Code buttons should have center-aligned text/icons no matter their width.

Current behavior

VS Code buttons will only have centered text/icons up to 300px in width.

Screenshots

With max-width of 300px:

Without max-width:

Desktop (please complete the following information):

• Toolkit Version: v1.0.0

[hawkticehurst]

The solution is to literally just remove this line of code: https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/src/button/button.styles.ts#L88

[hawkticehurst]

cc @daviddossett

[chaiwattsw]

@hawkticehurst Can I take this issue?

[hawkticehurst]

@chaiwattsw absolutely! Go for it 🙂

[chaiwattsw]

@chaiwattsw absolutely! Go for it 🙂

Thanks!