Page MenuHomePhabricator

Adjust the mark as read "X" icon size
Closed, ResolvedPublic


A small tweak may be needed for the "X" icon to not compete in size with the notification actions too much. The proposal is to reduce the size a bit (to 1.7em) while keeping the "X" noticeable enough (avoiding the issues from T112217).

Current (size: 1.875em):

Proposed (size: 1.7em):

Event Timeline

Pginer-WMF raised the priority of this task from to Needs Triage.
Pginer-WMF updated the task description. (Show Details)
MtDu added a subscriber: MtDu.

This is mark as read one right? Am I just supposed to change the svg?

This is mark as read one right? Am I just supposed to change the svg?

This refers to the action of marking an individual item as read, which is presented as an "X" icon. The size I was referring to is for the html element (the element with the "oo-ui-iconElement-icon" and "oo-ui-icon-close" classes). Reducing the dimensions of the SVG asset will have no effect since the html element using the image defines it's background size as "cover" which will scale the image to fit the size of the element anyway.

Change 264995 had a related patch set uploaded (by MtDu):
Adjust mark as read icon size

When someone gets a chance, this patch is in need of review.

Change 264995 merged by jenkins-bot:
Adjust mark as read icon size

Checked in betalabs

.mw-echo-ui-notificationItemWidget-markAsReadButton .oo-ui-iconElement-icon {

width: 1.7em !important;
height: 1.7em !important;


@Pginer-WMF @jmatazzoni
Vertical positioning is ok? I believe it's reported somewhere.

Also, please review T71915: x "Mark as read" in Flow messages in Echo flyout UX (too small, lacks tooltip, etc.) - shouldn't it be closed as Resolved?

It looks good. Thanks!
The result seems to fit quite well the reference dimensions (F3363922):