Allow for vscode-button-group to shrink like a button

[a-stewart]

If you have a <vscode-button-group> in a flex with limited width they don't shrink in the same way that <vscode-button> does.

This is very obvious if you mix <vscode-button-group>s and <vscode-button>s, for example:

If we set overflow: hidden on the group, that allows for the buttons within the group to be shrunk. We also set the width of the button to 100%-1px to ensure the divider stays visible. I checked and we don't need to make any adjustments to padding to keep the box the same size since when the box is not constrained, the width is just as wide as it needs to be.

[bendera]

The issue with this solution is that it makes every wrapper narrower, even when the button isn't part of a group. Check the attached screen recording, I was switchging between 100% and 100%-1px.

Screen.Recording.2025-05-20.180231.mp4

Maybe you could try wrap the content somehow like this:

<div class="wrapper>
  <div class="content">...</div>
  <div class="divider">...</div>
</div>

But honestly, I don't think it's an issue if the button group isn't shrinkable.

[a-stewart]

The issue with it not compressing is more just the different behaviour between button groups and buttons.

For now we have just added this to our css, so that neither shrink:

    vscode-button,
    vscode-button-group {
      flex-shrink: 0;
    }

One option could be add a new variable, like we do with --divier-diplsay but for the wrapper width.

    ::slotted(vscode-button:not(:last-child)) {
      --divider-display: block;
      --wrapper-width: calc(100%-1px);
      //...
    }

Then, we could just use that, keeping it as 100% for the standard buttons, but then specifying the specific width when the wrapper is shown.

    .wrapper {
      //...
      width: var(--wrapper-width, 100%);
      //...
    }

[bendera]

LGTM. Thanks!