Page MenuHomePhabricator

Icon cut off on "Donate now" button on wikimedia.org front page
Open, Needs TriagePublic

Assigned To
None
Authored By
Waddie96
Aug 2 2025, 12:41 AM
Referenced Files
F66738194: (index)
Oct 8 2025, 8:25 AM
F65702269: Screenshot 2025-08-02 at 09.58.32.png
Aug 2 2025, 8:47 AM
F65702267: Screenshot 2025-08-02 at 08.56.28.png
Aug 2 2025, 8:47 AM
F65701684: Screenshot 2025-08-01 at 23.26.29.png
Aug 2 2025, 12:41 AM
F65701685: Screenshot 2025-08-01 at 23.26.10.png
Aug 2 2025, 12:41 AM

Description

The heart icon is cut off on the "Donate now" button at the bottom of https://www.wikimedia.org on Safari and Chrome.

See screenshots.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
(unsure if matters, but https://foundation.wikimedia.org/wiki/Special:Version shows: 1.45.0-wmf.12 (4f0e620) 23:15, 28 July 2025

Other information (browser name/version, screenshots, etc.):
macOS 15.5 (24F74)
Safari Version 18.5 (20621.2.5.11.8)
Chrome Version 138.0.7204.169 (Official Build) (arm64)

Screenshot 2025-08-01 at 23.26.10.png (1×2 px, 1 MB)

Screenshot 2025-08-01 at 23.26.29.png (1×2 px, 1 MB)

Event Timeline

Also occurs few other places in those mini notices with the OOUI icon:

MediaWiki WikiEditor (2010 editor):

Screenshot 2025-08-02 at 08.56.28.png (1×2 px, 1 MB)

VisualEditor's page notice on Wikipedia:

Screenshot 2025-08-02 at 09.58.32.png (1×2 px, 1 MB)

Also occurs few other places in those mini notices with the OOUI icon:

MediaWiki WikiEditor (2010 editor):

Screenshot 2025-08-02 at 08.56.28.png (1×2 px, 1 MB)

VisualEditor's page notice on Wikipedia:

Screenshot 2025-08-02 at 09.58.32.png (1×2 px, 1 MB)

I believe that these two are T398529: Message: icons can get cut off depending on message text length. Unsure about the issue in the task description, though.

T398529: Message: icons can get cut off depending on message text length is fixed but it's still persistent on https://www.wikimedia.org/ unless that website 'hasn't upgraded'.
Proposed solution: (Add to .donate-emoji CSS selector to https://www.wikimedia.org/ lines 1541 to 1545 of (index) if that helps)

.donate-emoji {
    min-height: calc(var(--min-size-icon-medium) + 2px);
    min-width: calc(var(--min-size-icon-medium) + 2px);
}