@Volker_E do you know where the current max-width came from? I'm guessing WVUI, but would appreciate any context you have to share!

I think the button max-width shouldn't be fixed to a specific size but should have a 100% max-width to fit it with the demo box in all sizes and devices.

The problem has come up in mobile on tablet plus viewports as buttons have applied a display:block and the max-width has been around for 7+ years.

Buttons should not go full length here. It looks confusing with the center alignment and it's also confusing to understand that it represents a button.

We should be able to decide when we want the buttons to be full width and when we want the buttons to increase with the length of the text. Or at least, we could implement a button max-width with the max-width of each screen where the button is placed (to avoid the button to be with more than 1 text line).

The buttons currently grow in size until 448px. On a portrait phone they already take up nearly full-width. On landscape or a tablet I think a max-width similar to the status quo is useful to remain visually characteristic as a button.

In T310158#7991003, @Volker_E wrote:

The problem has come up in mobile on tablet plus viewports as buttons have applied a display:block and the max-width has been around for 7+ years.

Buttons should not go full length here. It looks confusing with the center alignment and it's also confusing to understand that it represents a button.

Perhaps this is a problem that should be resolved in the mobile skin, then? If we provide, by default, an inline button with max-width: 100% and an implementation sets display: block, it seems like that implementation should handle adding a new max-width as well.

It seems critical that we prevent the situation documented in the task description.

It looks like this task is blocking the resolution of T306025 – any updates here?

We could use CSS's min() function to do something like this:

max-width: min( @max-width-button, 100% );

That way, it'll choose the value that is smaller, so when the button's container is smaller than @max-width-button, the max width becomes 100%.

Unfortunately, this is not supported in a few older browsers for which we offer basic support:

• Safari < 11.1 (including iOS)
• IE 11
• Firefox < 75

For those browsers, we can default to max-width: 100%, which will prevent buttons from overflowing their containers and may just result in a few very wide buttons on desktop.

When refining this task, we should resolve the discussion in T337865: Buttons: limit text length with ellipsis when it exceeds the maximum. The addition of a Tooltip for truncated text makes sense to me, and would imply this is actually blocked on T340456: Tooltip: Add Tooltip component to Codex.

Change #1129246 had a related patch set uploaded (by Bmartinezcalvo; author: Bmartinezcalvo):

[design/codex@main] [Proof of concept] Update Button, ToggleButton, ButtonGroup, and ButtonGroups max-width

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

To prevent Button’s max-width from causing issues in narrow containers, we discussed updating it to 100% to ensure the Button can expand based on its content and fully fill the container when needed. I’ve worked on this patch (demo) to update the Button and ToggleButton max-width to @size-full.

We’ll need to evaluate using ellipses when the text exceeds the button’s width to avoid content getting cut off in T337865.

Additionally, while working on T340535: [EPIC] Responsive layout approach, we’ll need to decide whether Buttons should always default to full-width on mobile.

In T310158#10661395, @bmartinezcalvo wrote:

To prevent Button’s max-width from causing issues in narrow containers, we discussed updating it to 100% to ensure the Button can expand based on its content and fully fill the container when needed. I’ve worked on this patch (demo) to update the Button and ToggleButton max-width to @size-full.

We’ll need to evaluate using ellipses when the text exceeds the button’s width to avoid content getting cut off in T337865.

Additionally, while working on T340535: [EPIC] Responsive layout approach, we’ll need to decide whether Buttons should always default to full-width on mobile.

I actually think we should apply ellipses on overflow as part of this task. The centering of long text in the button (shown in your screenshot) is more confusing than truncating with ellipses because you don't get the context for the beginning of the text. I would suggest we merge T337865 into this task, so buttons behave the same way as InfoChip and InputChip in T388857. We can figure out the tooltip part later in T364928.

El T310158#10662110, @CCiufo-WMF escribió:

I actually think we should apply ellipses on overflow as part of this task. The centering of long text in the button (shown in your screenshot) is more confusing than truncating with ellipses because you don't get the context for the beginning of the text. I would suggest we merge T337865 into this task, so buttons behave the same way as InfoChip and InputChip in T388857. We can figure out the tooltip part later in T364928.

I didn’t apply ellipses in this patch based on the feedback from T337865#9861972 against using ellipses in buttons. That said, I agree that having the content cut off like this is more confusing. We can revisit the approach in T364928: [Spike] Investigate ellipsis truncation in Codex components using Tooltip to decide whether to use a Tooltip to display the full Button's label or explore other solutions, like wrapping the content.

Change #1129246 merged by jenkins-bot:

[design/codex@main] styles: update max-width of Button, ToggleButton, ButtonGroup, and ToggleButtonGroup

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

I think we should wrap text on overflow as part of this change. The current behavior cuts off the beginning and end of the label:

This is more likely to happen at narrower viewports now that the max width is 100%. I'd rather we occasionally break the layout with wrapping rather than hide potentially important text from users.

Change #1131780 had a related patch set uploaded (by Bmartinezcalvo; author: Anne Tomasevich):

[design/codex@main] Revert "styles: update max-width of Button, ToggleButton, ButtonGroup, and ToggleButtonGroup"

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

Change #1131780 merged by jenkins-bot:

[design/codex@main] Revert "styles: update max-width of Button, ToggleButton, ButtonGroup, and ToggleButtonGroup"

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

Change #1133258 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.21.1 to v1.22.0

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

Test wiki created on Patch demo by Eric C Gardner using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/59d55f2723/w/

Change #1133258 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.21.1 to v1.22.0

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

Test wiki on Patch demo by Eric C Gardner using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/59d55f2723/w/