Page MenuHomePhabricator
Create Task
Maniphest T411526

Improve CSS styling for verification email
Open, HighPublic3 Estimated Story Points
Actions

Assigned To
Michael
Authored By
Urbanecm_WMF
Tue, Dec 2, 5:01 PM
Tags
Referenced Files
F70947077: image.png
Mon, Dec 8, 9:39 PM
F70946923: IMG_9924.jpg
Mon, Dec 8, 9:38 PM
F70946811: Screenshot 2025-12-08 at 4.15.27 PM.png
Mon, Dec 8, 9:22 PM
F70946602: IMG_7592.PNG
Mon, Dec 8, 9:22 PM
F70946446: Screenshot 2025-12-08 at 3.36.21 PM.png
Mon, Dec 8, 9:22 PM
F70942365: image.png
Mon, Dec 8, 4:33 PM
F70942360: image.png
Mon, Dec 8, 4:33 PM
F70942318: image.png
Mon, Dec 8, 4:29 PM
View All 9 Files
Subscribers
AAlhazwani-WMF
Aklapper
Etonkovidova
KStoller-WMF
Michael
Urbanecm_WMF

Description

@AAlhazwani-WMF tested the work by @Urbanecm_WMF in T396155: Improve verification email and noticed several issues:

@AAlhazwani-WMF wrote in WMF Slack:

did some testing with apple mail app (with an icloud account) and gmail app (with a google account) and there are some issues that i'd like to address prior to releasing this.
on gmail, it doesn't render the link as a button, and there are some broken images (might be related to testwiki only)

{F70822143}{F70822145}

generally speaking the email has not been styled as desired, and spec-ed out on figma (on the left screenshot on testwiki, on the right desired result)

{F70822153}{F70822156}

while it looks ok-ish on apple mail mobile, it looks very tiny on apple mail desktop.

{F70822161}{F70822163}
In T396155#11424344, @Etonkovidova wrote:

There are some discrepancy in displaying the email format summarized below:
The following logo is not displayed in gmail desktop:

<img src="https://ci3.googleusercontent.com/meips/ADKq_NYW3pmzSU2w2w2iIkRCjL7X25d0L3RpYLPcphbyCQfqf99ovVnwB3koWdllGrq_ahyT_Zpu4mVfM8r1k5pRavAwu_nqy8gf14foyIbCg91aStKBTs0X1QPg7KVDb9Ht92021192HfTnwg=s0-d-e1-ft#https://auth.wikimedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg" alt="Wikipedia logo" class="CToWUd" data-bit="iit" jslog="138226; u014N:xr6bB; 53:WzAsMl0.">
gmail Desktop; "Always display external images" option is ongmail Mobile
Screenshot 2025-12-02 at 10.12.00 AM.png (1×1 px, 207 KB)
(1) the logo is not displayed (2) the link is not rendered as a button
IMG_7589.jpg (1×828 px, 327 KB)
(1) the two logos are placed too tight (2) the link is not rendered as a button

Other email client (mail.com) displays the oversized logo, e.g.

Screenshot 2025-12-02 at 10.49.36 AM.png (970×2 px, 191 KB)

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Revert^3 "i18n: replace <> to avoid false positive export errors"mediawiki/corewmf/1.46.0-wmf.5+2 -2
Revert^3 "Confirmation email: further styling adjustments"mediawiki/corewmf/1.46.0-wmf.5+7 -52
Revert^2 "i18n: replace <> to avoid false positive export errors"mediawiki/corewmf/1.46.0-wmf.5+2 -2
Revert^2 "Confirmation email: further styling adjustments"mediawiki/corewmf/1.46.0-wmf.5+52 -7
Revert "i18n: replace <> to avoid false positive export errors"mediawiki/corewmf/1.46.0-wmf.5+2 -2
Revert "Confirmation email: further styling adjustments"mediawiki/corewmf/1.46.0-wmf.5+7 -52
Confirmation email: further styling adjustmentsmediawiki/corewmf/1.46.0-wmf.5+52 -7
Confirmation email: further styling adjustmentsmediawiki/coremaster+52 -7
Adjust styling of confirmation emailsmediawiki/corewmf/1.46.0-wmf.5+63 -79
Adjust styling of confirmation emailsmediawiki/coremaster+63 -79
Customize query in gerrit

Related Objects

Event Timeline

Urbanecm_WMF created this task.Tue, Dec 2, 5:01 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptTue, Dec 2, 5:01 PM
Urbanecm_WMF updated the task description. (Show Details)Tue, Dec 2, 5:03 PM
Urbanecm_WMF added subscribers: AAlhazwani-WMF, Etonkovidova.
Urbanecm_WMF assigned this task to Michael.Tue, Dec 2, 5:07 PM
Urbanecm_WMF added a subscriber: Michael.

Assigning to @Michael based on our 1:1 conversation.

Restricted Application added a project: User-Michael. · View Herald TranscriptTue, Dec 2, 5:07 PM
Urbanecm_WMF mentioned this in T396155: Improve verification email.Tue, Dec 2, 5:27 PM
Urbanecm_WMF triaged this task as High priority.Tue, Dec 2, 5:36 PM
Urbanecm_WMF moved this task from Inbox to Up Next (estimated tasks) on the Growth-Team board.
Urbanecm_WMF set the point value for this task to 3.
KStoller-WMF moved this task from Up Next (estimated tasks) to FY2025-26 Q2 Sprint 5 on the Growth-Team board.Tue, Dec 2, 5:53 PM
KStoller-WMF edited projects, added Growth-Team (FY2025-26 Q2 Sprint 5); removed Growth-Team.
Michael moved this task from Incoming to Doing on the Growth-Team (FY2025-26 Q2 Sprint 5) board.Wed, Dec 3, 2:35 PM
DMburugu added a project: OKR-Work.Thu, Dec 4, 1:37 PM
gerritbot added a comment.Thu, Dec 4, 3:17 PM

Change #1215192 had a related patch set uploaded (by Michael Große; author: Michael Große):

[mediawiki/core@master] Adjust styling of confirmation emails

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

gerritbot added a project: Patch-For-Review.Thu, Dec 4, 3:17 PM
Michael moved this task from Doing to Code Review on the Growth-Team (FY2025-26 Q2 Sprint 5) board.Thu, Dec 4, 3:22 PM
gerritbot added a comment.Mon, Dec 8, 1:49 PM

Change #1215192 merged by jenkins-bot:

[mediawiki/core@master] Adjust styling of confirmation emails

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

ReleaseTaggerBot added a project: MW-1.46-notes (1.46.0-wmf.7; 2025-12-16).Mon, Dec 8, 2:00 PM
Maintenance_bot removed a project: Patch-For-Review.Mon, Dec 8, 2:31 PM
Urbanecm_WMF added a comment.EditedMon, Dec 8, 4:29 PM

I tested this on enwiki beta with Gmail:

image.png (808×1 px, 86 KB)

It seems like we're still having issues with the logo for some reason. On a non-Gmail address, it looks correct, but the button and background is not there:

image.png (630×1 px, 152 KB)

I also tested with an Office365-based account, where it seems to work as expected:

image.png (1×3 px, 246 KB)

With dark mode on (integrated in MS Outlook's default client), the logo is not legible, but I'm not sure we can really do something about that:

image.png (1×3 px, 288 KB)

Urbanecm_WMF attached a referenced file: F70942365: image.png. (Show Details)Mon, Dec 8, 4:35 PM
Urbanecm_WMF attached a referenced file: F70942360: image.png. (Show Details)
gerritbot added a comment.Mon, Dec 8, 5:04 PM

Change #1216621 had a related patch set uploaded (by Urbanecm; author: Michael Große):

[mediawiki/core@wmf/1.46.0-wmf.5] Adjust styling of confirmation emails

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

gerritbot added a project: Patch-For-Review.Mon, Dec 8, 5:04 PM
gerritbot added a comment.Mon, Dec 8, 5:29 PM

Change #1216621 merged by jenkins-bot:

[mediawiki/core@wmf/1.46.0-wmf.5] Adjust styling of confirmation emails

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

Maintenance_bot removed a project: Patch-For-Review.Mon, Dec 8, 5:30 PM
Stashbot mentioned this in T409057: Move mustache templates out of includes.Mon, Dec 8, 5:31 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-08T17:31:37Z] <urbanecm@deploy2002> Started scap sync-world: Backport for [[gerrit:1216620|Move mustache templates from includes (T409057)]], [[gerrit:1216621|Adjust styling of confirmation emails (T411526)]]

Stashbot added a comment.Mon, Dec 8, 5:33 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-08T17:33:37Z] <urbanecm@deploy2002> urbanecm: Backport for [[gerrit:1216620|Move mustache templates from includes (T409057)]], [[gerrit:1216621|Adjust styling of confirmation emails (T411526)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Stashbot added a comment.Mon, Dec 8, 5:42 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-08T17:42:04Z] <urbanecm@deploy2002> Finished scap sync-world: Backport for [[gerrit:1216620|Move mustache templates from includes (T409057)]], [[gerrit:1216621|Adjust styling of confirmation emails (T411526)]] (duration: 10m 28s)

Urbanecm_WMF added a comment.Mon, Dec 8, 5:52 PM

I backported the code to production and tested again with testwiki. Good news, the logo appears fine with Gmail too. Not sure why it is not working with beta.

ReleaseTaggerBot edited projects, added MW-1.46-notes (1.46.0-wmf.5; 2025-12-02); removed MW-1.46-notes (1.46.0-wmf.7; 2025-12-16).Mon, Dec 8, 6:00 PM
Urbanecm_WMF moved this task from Code Review to QA on the Growth-Team (FY2025-26 Q2 Sprint 5) board.Mon, Dec 8, 8:27 PM
Etonkovidova added a comment.Mon, Dec 8, 9:22 PM

Thx, @Urbanecm_WMF! I checked confirm email on testwiki wmf.5 - the issues have been fixed. Probably it's worth to confirm with @AAlhazwani-WMF. Couple of things that do not quite match the design in T396155

  • The logo (gmail desktop) looks rather small.
  • non-gmail email shows "Confirm your email" as a link
gmailanother email client
Screenshot 2025-12-08 at 3.36.21 PM.png (872×1 px, 108 KB)
IMG_7592.PNG (1×828 px, 120 KB)
Screenshot 2025-12-08 at 4.15.27 PM.png (780×1 px, 153 KB)
KStoller-WMF subscribed.Mon, Dec 8, 9:38 PM

The logo (gmail desktop) looks rather small.
non-gmail email shows "Confirm your email" as a link

I'm noticing the same issues. I don't think these issues needs to block the release, but we should aim to fix both.

We might also want to add design specs for darkmode? Here's a screenshot from Gmail with device appearance settings set to "Dark":

IMG_9924.jpg (1×1 px, 153 KB)

Urbanecm_WMF added a comment.Mon, Dec 8, 9:39 PM
In T411526#11442171, @KStoller-WMF wrote:

We might also want to add design specs for darkmode? Here's a screenshot from Gmail with device appearance settings set to "Dark":

IMG_9924.jpg (1×1 px, 153 KB)

Why is dark mode working differently in each client...

image.png (1×3 px, 254 KB)

This is what I see in Outlook (email's from beta, but that shouldn't cause an issue anyway).

AAlhazwani-WMF added a comment.Tue, Dec 9, 11:46 AM
In T411526#11442110, @Etonkovidova wrote:
  • The logo (gmail desktop) looks rather small.
  • non-gmail email shows "Confirm your email" as a link

yeah, that's the case because the PNG variant includes the logotype ("wikipedia test wiki") below the logomark (wiki globe). i'd suggest increasing its size from 50px to 100px.

beside dark mode (that we could address separately) there are a few small spacing issues. while inspecting the code, it was hard to understand which styles are from our own code, and which are from the email client.

for example, on mobile we keep the 32px padding all around, while we'd like to set it to 16px under 600px width. or that we'd like to "hide" the light grey background too. for simplicity, i've put together a codepen with the desired styles https://codepen.io/forestbee/full/RNagLYm.

gerritbot added a comment.Tue, Dec 9, 1:54 PM

Change #1216795 had a related patch set uploaded (by Michael Große; author: Michael Große):

[mediawiki/core@master] Confirmation email: further styling adjustments

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

gerritbot added a project: Patch-For-Review.Tue, Dec 9, 1:54 PM
gerritbot added a comment.Tue, Dec 9, 10:39 PM

Change #1216867 had a related patch set uploaded (by Urbanecm; author: Michael Große):

[mediawiki/core@wmf/1.46.0-wmf.5] Confirmation email: further styling adjustments

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

gerritbot added a comment.Tue, Dec 9, 10:52 PM

Change #1216795 merged by jenkins-bot:

[mediawiki/core@master] Confirmation email: further styling adjustments

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

ReleaseTaggerBot edited projects, added MW-1.46-notes (1.46.0-wmf.7; 2025-12-16); removed MW-1.46-notes (1.46.0-wmf.5; 2025-12-02).Tue, Dec 9, 11:00 PM
Etonkovidova moved this task from QA to Test in Production on the Growth-Team (FY2025-26 Q2 Sprint 5) board.Wed, Dec 10, 3:35 PM
gerritbot added a comment.Wed, Dec 10, 4:48 PM

Change #1216867 merged by jenkins-bot:

[mediawiki/core@wmf/1.46.0-wmf.5] Confirmation email: further styling adjustments

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

Stashbot added a comment.Wed, Dec 10, 4:49 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-10T16:49:12Z] <urbanecm@deploy2002> Started scap sync-world: Backport for [[gerrit:1216867|Confirmation email: further styling adjustments (T411526)]], [[gerrit:1217235|i18n: replace <> to avoid false positive export errors]]

ReleaseTaggerBot edited projects, added MW-1.46-notes (1.46.0-wmf.5; 2025-12-02); removed MW-1.46-notes (1.46.0-wmf.7; 2025-12-16).Wed, Dec 10, 5:00 PM
Maintenance_bot removed a project: Patch-For-Review.Wed, Dec 10, 5:32 PM
Stashbot added a comment.Wed, Dec 10, 5:46 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-10T17:46:44Z] <urbanecm@deploy2002> Started scap sync-world: Backport for [[gerrit:1216867|Confirmation email: further styling adjustments (T411526)]], [[gerrit:1217235|i18n: replace <> to avoid false positive export errors]]

gerritbot added a comment.Wed, Dec 10, 6:41 PM

Change #1217258 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/core@wmf/1.46.0-wmf.5] Revert "Confirmation email: further styling adjustments"

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

gerritbot added a project: Patch-For-Review.Wed, Dec 10, 6:41 PM

Change #1217259 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/core@wmf/1.46.0-wmf.5] Revert "i18n: replace <> to avoid false positive export errors"

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

gerritbot added a comment.Wed, Dec 10, 6:41 PM

Change #1217259 merged by Urbanecm:

[mediawiki/core@wmf/1.46.0-wmf.5] Revert "i18n: replace <> to avoid false positive export errors"

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

gerritbot added a comment.Wed, Dec 10, 6:41 PM

Change #1217258 merged by Urbanecm:

[mediawiki/core@wmf/1.46.0-wmf.5] Revert "Confirmation email: further styling adjustments"

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

Maintenance_bot removed a project: Patch-For-Review.Wed, Dec 10, 7:31 PM
gerritbot added a comment.Thu, Dec 11, 7:30 PM

Change #1217573 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^2 "Confirmation email: further styling adjustments"

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

gerritbot added a project: Patch-For-Review.Thu, Dec 11, 7:30 PM

Change #1217574 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^2 "i18n: replace <> to avoid false positive export errors"

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

gerritbot added a comment.Thu, Dec 11, 7:43 PM

Change #1217573 merged by jenkins-bot:

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^2 "Confirmation email: further styling adjustments"

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

gerritbot added a comment.Thu, Dec 11, 7:43 PM

Change #1217574 merged by jenkins-bot:

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^2 "i18n: replace <> to avoid false positive export errors"

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

Stashbot added a comment.Thu, Dec 11, 7:47 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-11T19:47:12Z] <urbanecm@deploy2002> Started scap sync-world: Backport for [[gerrit:1217573|Revert^2 "Confirmation email: further styling adjustments" (T411526)]], [[gerrit:1217574|Revert^2 "i18n: replace <> to avoid false positive export errors" (T411526)]]

Maintenance_bot removed a project: Patch-For-Review.Thu, Dec 11, 8:30 PM
gerritbot added a comment.Thu, Dec 11, 8:47 PM

Change #1217580 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^3 "Confirmation email: further styling adjustments"

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

gerritbot added a project: Patch-For-Review.Thu, Dec 11, 8:47 PM

Change #1217581 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^3 "i18n: replace <> to avoid false positive export errors"

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

gerritbot added a comment.Thu, Dec 11, 8:48 PM

Change #1217580 merged by Urbanecm:

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^3 "Confirmation email: further styling adjustments"

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

gerritbot added a comment.Thu, Dec 11, 8:48 PM

Change #1217581 merged by Urbanecm:

[mediawiki/core@wmf/1.46.0-wmf.5] Revert^3 "i18n: replace <> to avoid false positive export errors"

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

Stashbot added a comment.Thu, Dec 11, 8:49 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-11T20:49:00Z] <urbanecm@deploy2002> Started scap sync-world: Backport for [[gerrit:1217580|Revert^3 "Confirmation email: further styling adjustments" (T411526)]], [[gerrit:1217581|Revert^3 "i18n: replace <> to avoid false positive export errors" (T411526)]]

Stashbot added a comment.Thu, Dec 11, 9:22 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-11T21:22:06Z] <urbanecm@deploy2002> urbanecm: Backport for [[gerrit:1217580|Revert^3 "Confirmation email: further styling adjustments" (T411526)]], [[gerrit:1217581|Revert^3 "i18n: replace <> to avoid false positive export errors" (T411526)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Maintenance_bot removed a project: Patch-For-Review.Thu, Dec 11, 9:31 PM
Stashbot added a comment.Thu, Dec 11, 9:35 PM

Mentioned in SAL (#wikimedia-operations) [2025-12-11T21:35:04Z] <urbanecm@deploy2002> Finished scap sync-world: Backport for [[gerrit:1217580|Revert^3 "Confirmation email: further styling adjustments" (T411526)]], [[gerrit:1217581|Revert^3 "i18n: replace <> to avoid false positive export errors" (T411526)]] (duration: 46m 04s)

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits