**List of steps to reproduce**:
* Open the Codex Demo page and navigate to the [[ https://doc.wikimedia.org/codex/main/components/button.html#demos | Button component's Demo section ]]
* In the "default" text section, enter a long sentence, such as "This is the story all about how my life got twisted up and down and then we are"
**What happens?**:
* The text extends beyond the button's borders.
When a button's content is longer than the max-width set via CSS, the text overflows the button element:
{F35182721}
You can see another example of this in the new dialog component:
{F35182719}
**What should have happened instead?**:
* The text should have been truncated when the button's maximum width had been reached.
We should update this to hide overflow with an ellipsis or something.
**Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.**:
* Detected using Chrome v102 on Firefox v101
Monterey 12.0.1
{F35201366}
* On Safari 15.1, the text is truncated, however it is not centralized on the button as per the requirements. There should be equal padding at both ends of the button.
{F35201373}