Set minimum width on action labels
Open, Needs TriagePublic


Notification actions are placed next to each other. With that layout, the horizontal position of an item depends on the length of the item before it.

Since some actions such as user names can have a very different length, this can generate a distracting vertical pattern (this is more aggravated when users get several notifications of the same kind, which have the same actions as showcased in an example by @jmatazzoni). Note in the example below the irregular "river" formed by the icons of second actions:

We don't want to completely align actions vertically (as in a table/grid) since too much spacing between actions
would make them no longer feel they belong to the same group.

However, we can compensate the extreme cases a bit by defining a minimum width for the action labels.
I experimented with several values for the min-width property of actions ( ".mw-echo-ui-menuItemWidget-content" elements ) and found 70px to provide a good balance (feel free to use an approximation in EMs if needed).

Since this is a perception issue affected by different factors (action lengths, types of notification received) we may want to do an initial adjustment, be exposed to it for a while and tweak it if needed.

I think this is a good idea and would like to do it. However, if it is more complicated somehow than it seems, please speak up.

Catrope renamed this task from Define a minimum length for action labels to avoid to Set minimum width on action labels.Mar 23 2016, 8:18 PM