Button: Prevent `flex` buttons to shrink when there's not enough space for labels
Closed, DuplicatePublicBUG REPORT
Actions

Assigned To

None

Authored By

	Volker_E
	Mar 26 2025, 11:03 PM

Description

Background

In connection to T310158, @lwatson pointed out, that our current Flexbox approach to Buttons can result in cut off buttons in mostly responsive, not enough width providing contexts.

Steps to replicate the issue (include links if applicable):

Inspect the Button docs page
Enable responsive debugging/or resize the window and shrink the available size to a width, where all three buttons won't fit.

What happens?:
Button labels are cut off to not being fully readable anymore.

What should have happened instead?:
Buttons should show full label.

Software version
Codex v1.21.0

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Button, styles: Prevent button labels from being cut-off	design/codex	main	+2 -0

Customize query in gerrit

Related Objects

Mentioned In: T310158: Button, ButtonGroup: solve max-width and text issues
Mentioned Here: T337865: Buttons: limit text length with ellipsis when it exceeds the maximum
T310158: Button, ButtonGroup: solve max-width and text issues

Event Timeline

Volker_E created this task.Mar 26 2025, 11:03 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptMar 26 2025, 11:03 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change #1131477 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] Button, styles: Prevent button labels from being cut-off

https://gerrit.wikimedia.org/r/1131477

gerritbot added a project: Patch-For-Review.Mar 26 2025, 11:14 PM

Possible solutions to avoid the Button text to be cut off when it exceeds the available space are:

Option 1: Use an Ellipsis (related task: T337865)

There was some feedback against using ellipses in buttons (see T337865#9861972), but cutting off text as it currently appears is even more confusing. So we agreed in T310158#10662203 to use an ellipsis instead of truncating text.

Example:

Option 2: Wrap the Button Text

Another solution is to wrap the button text, similar to how it works in Select. However, this approach may lead to unbalanced buttons when placed within a group.