ButtonGroup does not stack on screen resize if the Buttons have no breaks in labels

[davidferguson]

Provide a general summary of the issue here

The <ButtonGroup> in a horizontal orientation does not stack to a vertical orientation on screen resize, if none of the <Button> children have a break (space, dash, etc.) in their label.

🤔 Expected Behavior?

The <ButtonGroup> in horizontal orientation that has <Button> children with no spaces in their labels should stack vertically when the screen is resized to a width smaller than the ButtonGroup width.

😯 Current Behavior

The <ButtonGroup> does not stack when the screen is resized.

However, adding a single space to any of the <Button> labels does make the ButtonGroup stack.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Codesandbox demo

Reproduction code (in case the codesandbox link no longer works):

// this does not stack
<ButtonGroup>
  <Button variant="primary">nospace</Button>
  <Button variant="secondary">nospace</Button>
  <Button variant="secondary">nospace</Button>
</ButtonGroup>

// this stacks fine
<ButtonGroup>
  <Button variant="primary">with space</Button>
  <Button variant="secondary">nospace</Button>
  <Button variant="secondary">nospace</Button>
</ButtonGroup>

Version

latest

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

If other, please specify.

No response

What operating system are you using?

macOS 12.4

🧢 Your Company/Team

Adobe

🕷 Tracking Issue

No response

[LFDanLu]

Reproduced this locally, seems like this section of the code always resolves with maxX being greater than the last button's calculated child.offsetLeft + child.offsetWidth by just 1. Will need to dig further to see if there is a better way to detect overflow here