Page MenuHomePhabricator

[subtask] Alert and notification icon buttons do not match size of other user-links icons at tablet screen size
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Reduce size of the browser window to less than 1120px

What happens?:

  • Hover over the watchstar and see the size is 44px (e.g. for touch interactions on a tablet)
  • Hover over the alerts or notices icon buttons and the size is 32px

What should have happened instead?:

The size of all the icon buttons should be the same at this screen resolution, and probably all should be 44px for touch interactions (e.g. tablets).

If the icons are not the same size, then we include both "Saved pages" and "Watchlist", then the spacing of the items in the user toolbar (header) appears inconsistent.

Screenshot 2026-06-05 at 8.58.44 AM.png (1,326×672 px, 52 KB)

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Event Timeline

Change #1298254 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/skins/Vector@master] Set @min-size-interactive-touch for echo notification icon buttons

https://gerrit.wikimedia.org/r/1298254

Change #1298254 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Set @min-size-interactive-touch for echo notification icon buttons

https://gerrit.wikimedia.org/r/1298254

Jdlrobson-WMF renamed this task from Alert and notification icon buttons do not match size of other user-links icons at tablet screen size to [subtask] Alert and notification icon buttons do not match size of other user-links icons at tablet screen size.Jun 8 2026, 5:52 PM
Jdlrobson-WMF triaged this task as Medium priority.
Jdlrobson-WMF moved this task from Incoming to Ready for sprint on the Reader Experience Team board.
Etonkovidova subscribed.

The screenshot is for with 1024 px width (iPad Pro) on enwiki wmf.7(maybe @Sneha can take a quick look):

Screenshot 2026-06-23 at 2.53.15 PM.png (1,748×750 px, 94 KB)

Screenshot 2026-06-23 at 3.50.50 PM.png (2,004×478 px, 116 KB)

Sneha added a subscriber: HFan-WMF.

@Etonkovidova Just to clarify based on the descriptions it seems you meant Watchlist icon size is bigger (44px) than alert/notices (32px)? It looks the opposite where watchlist icon looks much smaller than the rest. I raised this with Derek and it seems like the icon themselves needed to be modified

@Etonkovidova Just to clarify based on the descriptions it seems you meant Watchlist icon size is bigger (44px) than alert/notices (32px)? It looks the opposite where watchlist icon looks much smaller than the rest. I raised this with Derek and it seems like the icon themselves needed to be modified

@Sneha The task is about icon sizes for Alert and Echo notification icon buttons their mismatch with the Watchlist star button with tablet
The patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1298254 commit message:

Set @min-size-interactive-touch for echo notification icon buttons

This fixes an issue where the size and spacing of the buttons on tablet screen sizes does not match other icon buttons (e.g. watchlist).

There is another task about the bookmark looking much bigger than the Watchstar.

Spoke with @Etonkovidova about this and she is going to resolve it

Etonkovidova added a subscriber: Jdlrobson.

@Jdlrobson - I checked the fix on wmf. 8 - seems to be working as expected. All icons (echo badges and watchstar) display

min-width: @min-size-interactive-touch;
min-height: @min-size-interactive-touch;

for the tablet breakpoint min-width-breakpoint-tablet (640-1120 px viewport size).

Screenshot 2026-06-25 at 6.47.53 PM.png (2,170×934 px, 327 KB)
Screenshot 2026-06-25 at 6.49.30 PM.png (2,170×1,700 px, 716 KB)

Resolving the task; If something else needs to be done - please re-open it.