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:

notifs-ragged3.png (1×1 px, 279 KB)

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).

notifs-aligned3.png (1×1 px, 273 KB)

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

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

Etonkovidova added a subscriber: Etonkovidova.

Checked in wmf.2 - seems fine.

betalabs (more various notifications)testwiki wmf.2enwiki (without the patch)
Screen Shot 2020-07-29 at 3.06.01 PM.png (871×553 px, 103 KB)
Screen Shot 2020-07-29 at 3.09.41 PM.png (639×546 px, 72 KB)
Screen Shot 2020-07-29 at 3.04.25 PM.png (689×583 px, 120 KB)