fix: prevent button text wrapping using max-content for button min-width

[Bracciata]

Closes #2190 and https://github.com/dequelabs/walnut/issues/13150 #1982

Updates buttons so they do not wrap unless overridden to wrap. Prevents button text from wrapping and no longer makes 6.25rem the minimum width for all buttons.

QA Steps:
Navigate to a page with a button
Shrink the width of the page until it is less than the width of the button
Verify the button doesn't wrap and instead overflows the page.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2214.d15792l1n26ww3.amplifyapp.com

[Copilot]

Pull request overview

This PR prevents button contents from wrapping by default, addressing issue #2190. The change ensures buttons maintain their natural width to accommodate content without wrapping unless explicitly overridden.

Changes:

• Added min-width: max-content CSS property to button styles to prevent text wrapping
• Added e2e test to verify default no-wrap behavior and override capability

Reviewed changes

Copilot reviewed 2 out of 19 changed files in this pull request and generated 1 comment.

File	Description
packages/styles/button.css	Adds min-width CSS property to prevent button text wrapping
packages/react/src/components/Button/screenshots.e2e.tsx	Adds test coverage for button wrapping behavior

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[shawnsharpDQ]

@Bracciata I am seeing that there used to be a max-width of 6.25rem on the button. The change you have implemented is what we would like from design but I am not sure if this will have a cascading effect across our products. Anyway to confirm if this is a breaking change or not?

Here is the cauldron ticket referring to the change #1982

[Bracciata]

@Bracciata I am seeing that there used to be a max-width of 6.25rem on the button. The change you have implemented is what we would like from design but I am not sure if this will have a cascading effect across our products. Anyway to confirm if this is a breaking change or not?

There is a good chance it is a breaking change within some repo. Thoughts on doing min-width: min(max-content, 6.25rem)?

@shawnsharpDQ

Correction. Not a breaking change as there was previously a min width and this is a desired change. The minimum still fits all content.

[shawnsharpDQ]

2 birds with 1 stone! Love it

[gupta-tanvi26]

Wondering if we want to implement this change across across other components too? Like the description list (just 1 example - I notice that the content wraps around for the description list details)

[anastasialanz]

I'm worried that this change could cause buttons to flow outside of their containers if they did wrap and think removing the min-width all together would be the better option like the original issue proposed. See the example here where the long text flows outside of the container: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/max-content.

Update: Since we don't want button text to wrap at all, I think we can update where needed if this causes a problem.

[anastasialanz]

We chatted and decided to go with a non-breaking change for this commit because the button text should not wrap.