Notifications excessive right padding makes text to wrap unnecesarily
Closed, ResolvedPublic

Description

As illustrated below, notifications (unread messages in particular), have their text inside an element with 40px of right padding which makes the text to wrap. While having white space to organise elements is great, this seems too much of it:

I tried to set the padding to 10px in all directions for this element and it seems to solve the issue without breaking the alignment with other items.

Pginer-WMF updated the task description. (Show Details)
Pginer-WMF raised the priority of this task from to Needs Triage.
Pginer-WMF added a project: Notifications.
Pginer-WMF added a subscriber: Pginer-WMF.
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptDec 18 2015, 1:04 PM
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald Transcript
Catrope set Security to None.
Catrope triaged this task as High priority.
Catrope added a subscriber: Mooeypoo.
Catrope added a subscriber: Catrope.

This probably happened because an earlier version of the code used padding to make space for the X icon.

Mooeypoo added a comment.EditedDec 18 2015, 7:54 PM

This probably happened because an earlier version of the code used padding to make space for the X icon.

Spot on.

Shouldn't be too difficult to fix; we should just make sure this is consistent with the bundled notifications that have a slighthly different way to present the X button and dotdotdot menu.

I think it might be a good time to redo both of these structures as CSS table layouts? We discussed in the past, and I was sure I followed up on it, but apparently not? It would probably make things easier to align, though, especially when we have the different 'sub' notifications in the bundles.

This probably happened because an earlier version of the code used padding to make space for the X icon.

Spot on.

Shouldn't be too difficult to fix; we should just make sure this is consistent with the bundled notifications that have a slighthly different way to present the X button and dotdotdot menu.

I think it might be a good time to redo both of these structures as CSS table layouts? We discussed in the past, and I was sure I followed up on it, but apparently not? It would probably make things easier to align, though, especially when we have the different 'sub' notifications in the bundles.

Sounds good. Although if fixing the non-bundled one while perhaps breaking the bundled one (which isn't used at all unless you enable a BetaFeature that hasn't even been merged into master yet) is easy, then let's do that first.

Actually, erase everything we both said -- I just noticed that this isn't the new notification design, it is the old 'unstructured' one that came from the API.

For that matter, the class 'mw-echo-state' doesn't exist anymore in the new design, and the padding in the new design *should* be okay (in fact, that may explain why I thought I followed up on css table layout...because I think that one does use it)

So this is most probably fixed in the new design (that is now on Beta) and if it doesn't, then the problem is definitely not with the class shown. We should just verify that it looks good in beta and we can close this bug as already fixed or invalid.

Catrope closed this task as Resolved.Dec 19 2015, 1:19 AM
Catrope claimed this task.

Looks fine to me in master: