Page MenuHomePhabricator

Set minimum width on action labels
Closed, ResolvedPublic


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.

Event Timeline

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

Setting to 7em:


Change 615805 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Echo@master] Set min-width on action buttons

Change 615805 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Set min-width on action buttons

Catrope moved this task from Incoming to QA on the Growth-Team (Current Sprint) board.
Catrope assigned this task to Esanders.Jul 24 2020, 12:27 AM
Etonkovidova closed this task as Resolved.Jul 29 2020, 10:10 PM
Etonkovidova added a subscriber: Etonkovidova.

Checked in wmf.2 - seems fine.

betalabs (more various notifications)testwiki wmf.2enwiki (without the patch)