1860898 - Latest MILESTONE_MESSAGE_87 message heading text is misaligned

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Punam Dahiya [:pdahiya]]

Scope of this bug is to debug and fix UI updates seen in Milestone message in Fx119 and Fx120.

Comment 1

[Punam Dahiya [:pdahiya]]

Attachment: fx118-milestone-message.png

Comment 2

[Punam Dahiya [:pdahiya]]

Attachment: fx119-milestone-message.png

Comment 3

[Punam Dahiya [:pdahiya]]

Attachment: fx120-milestone-message.png

Comment 4

[Itiel]

I managed to fix this locally by adding:

display: flex;
flex-direction: row;
align-items: center;

in this rule:
https://searchfox.org/mozilla-central/rev/ffdc4971dc18e1141cb2a90c2b0b776365650270/browser/themes/shared/browser-shared.css#463

Comment 5

[Punam Dahiya [:pdahiya]]

(In reply to Itiel from comment #4)

I managed to fix this locally by adding:

display: flex;
flex-direction: row;
align-items: center;

in this rule:
https://searchfox.org/mozilla-central/rev/ffdc4971dc18e1141cb2a90c2b0b776365650270/browser/themes/shared/browser-shared.css#463

That's great ! @itiel if you can please attach patch with recommended fix, I can help review. Considering number of impressions and simplicity of fix, this will be a good uplift candidate thanks!

Comment 6

[Itiel]

Attachment: Bug 1860898 - Align heading text of the MILESTONE_MESSAGE_87 CFR message r?pdahiya

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/324fe11c40a3
Align heading text of the MILESTONE_MESSAGE_87 CFR message r=pdahiya,desktop-theme-reviewers,dao

Comment 8

[Punam Dahiya [:pdahiya]]

[Tracking Requested - why for this release]:

Patch fixes message UI. Message is live and seen by user with misaligned text.

Comment 9

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/324fe11c40a3

Comment 10

[Punam Dahiya [:pdahiya]]

Comment on attachment 9360469 [details]
Bug 1860898 - Align heading text of the MILESTONE_MESSAGE_87 CFR message r?pdahiya

Beta/Release Uplift Approval Request

• User impact if declined: UI fix of misaligned text
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: See Test plan in attached patch
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): CSS fix of milestone message
• String changes made/needed: None
• Is Android affected?: No

Comment 11

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this issue and I can confirm that all the elements from the "MILESTONE_MESSAGE_87" are correctly aligned. However, during testing, I have observed that on Windows the "X" button is displayed in the left part of the "See All" button and I've logged a separate issue for this (Bug 1862635)

Verified using the latest Firefox Nightly 121.0a1 (Build ID: 20231101093520) installed on Windows 10 x64, macOS 13.4.1, and Linux Mint 21.1.

Comment 12

[Dianna Smith [:diannaS]]

Comment on attachment 9360469 [details]
Bug 1860898 - Align heading text of the MILESTONE_MESSAGE_87 CFR message r?pdahiya

Approved for 120.0b6

Comment 13

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/15a13e014715

Comment 14

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this issue and I can confirm that all the elements from the "MILESTONE_MESSAGE_87" are correctly aligned.

Verified using the latest Firefox Beta 120.0 (Build ID: 20231113165053) installed on Windows 10 x64, macOS 14.1.1, and Ubuntu 22.04 x64.