@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: Define a text truncation approach for buttons that prevents overflow. 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.