Page MenuHomePhabricator

Favorite icon size and alignment is wrong in some skins
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Samwilson
Jun 11 2025, 10:51 PM
Referenced Files
F62776369: blk_vector22.png
Jul 2 2025, 8:52 AM
F62776364: blk_timeless.png
Jul 2 2025, 8:52 AM
F62602747: monobook.png
Jun 27 2025, 2:28 PM
F62602662: timeless.png
Jun 27 2025, 2:28 PM
F62602424: v22.png
Jun 27 2025, 2:28 PM
F62443385: image.png
Jun 24 2025, 1:54 PM
F62370772: image.png
Jun 18 2025, 3:47 AM
F62349869: image.png
Jun 17 2025, 6:38 AM

Description

Timeless

The size and alignment of the favorite icon is wrong in Timeless:

image.png (119×796 px, 8 KB)

(The underlines in the above screenshot have been enabled manually for demonstration; in actual use they only show on hover.)

Vector-2022

(The following is from T390019#10917969.)

The "Mark as favorite" button is visually imbalanced with the "Watch" button. The latter uses a 16x16px icon, whereas the former is 20x20px.

Current appearance:

image.png (136×494 px, 9 KB)

Proposed (bookmark is 16px):

image.png (103×478 px, 8 KB)

Vector

Similar situation for Vector:

image.png (65×541 px, 10 KB)

Event Timeline

Samwilson renamed this task from Favorite icon alignment is wrong in Timeless to Favorite icon alignment is wrong in some skins.Jun 17 2025, 6:38 AM
Samwilson updated the task description. (Show Details)

The hover colors in Vector-2022 are also different for the two buttons, #eaecf0 and #f8f9fa:

image.png (199×328 px, 6 KB)

Samwilson renamed this task from Favorite icon alignment is wrong in some skins to Favorite icon size and alignment is wrong in some skins.Jun 19 2025, 11:48 AM

Change #1161704 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/TemplateData@master] Fix display of favorite button on template pages

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

Change #1163085 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/TemplateData@master] Simplify config of FavoriteButton on template pages

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

One of the above patches (the other is just a clean-up) adds styles for each of the three skins to make the template-page favorite icon display okay. We talked briefly about the idea of using Codex, but in the end it seems like there's too much difference between skins to make it worthwhile. I've not yet fixed the color for the Timeless icon, but will do if the above approach passes review.

In Vector-2010, the icon also seems to be not harmonised.

image.png (65×541 px, 10 KB)

Oh yep, I already added that to the above patch. Have updated the task description. Thanks!

Krinkle attached a referenced file: F62349837: image.png. (Show Details)
Krinkle subscribed.

(Fixed attachments to be public, due to Phab bug when editing post-creation via drag-and-drop.)

Change #1161704 merged by jenkins-bot:

[mediawiki/extensions/TemplateData@master] Fix display of favorite button on template pages

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

Change #1163085 merged by jenkins-bot:

[mediawiki/extensions/TemplateData@master] Simplify config of FavoriteButton on template pages

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

I am working on trying to view the icon on a number of different platforms and devices. Some very preliminary feedback:

  • Should the icon appear on Minerva?
  • On Vector 2022 and Timeless, the favourite icon and watch star seem a bit out of alignment with the other items on that line
    v22.png (61×376 px, 5 KB)
  • On Vector 2010, should the icon be the same colour as the watch star? (This might be a separate ticket)
  • On Timeless, the icon's outline is a bit thin compared to the watch star (again, perhaps a separate ticket)
    timeless.png (86×326 px, 7 KB)
  • Monobook and Modern it is cut off (on Monobook everything on that row is cut off while logged in)
    monobook.png (80×650 px, 8 KB)

I am working on trying to view the icon on a number of different platforms and devices. Some very preliminary feedback:

  • Should the icon appear on Minerva?

Raised T398395.

  • On Vector 2022 and Timeless, the favourite icon and watch star seem a bit out of alignment with the other items on that line

This is worse on some languages than others, including:

  • Pa'O (blk)
    blk_timeless.png (67×341 px, 5 KB)
    blk_vector22.png (78×443 px, 7 KB)
  • Mon mnw on Vector 22
  • Eastern Pwo kjp on Vector 22
  • On Vector 2010, should the icon be the same colour as the watch star? (This might be a separate ticket)

Raised T398404.

  • On Timeless, the icon's outline is a bit thin compared to the watch star (again, perhaps a separate ticket)

Raised T398406.

  • Monobook and Modern it is cut off (on Monobook everything on that row is cut off while logged in)

Raised T398206.