2050841 - The strings are not vertically centered on the primary button in some of the Callout messages

Status: REOPENED

(Firefox :: Messaging System, defect, P2)

Description

[Valentin Bandac [:vbandac], Ecosystem QA]

Attachment: Screenshot.of.issue.jpg

[Notes]:

• This issue is reproducible regardless of whether the browser.nova.enabled pref is set to true or false.

[Affected versions]:

• Firefox Nightly 154.0a1 (Build ID: 20260624040957)
• Firefox Beta 153.0b4 (Build ID: 20260624090452)
• Firefox Release 152.0.1 (Build ID: 20260617213557)

[Affected Platforms]:

• Windows 10 x64
• Windows 11
• macOS 26.4
• Linux Mint 22.2

[Prerequisites]:

• Have the latest Firefox Nightly 154.0a1 build installed/extracted and opened.
• Set this pref in about:config: browser.newtabpage.activity-stream.asrouter.devtoolsEnabled = true.

[Steps to reproduce]:

1. Open the browser using the profile from the prerequisites.
2. Navigate to about:asrouter and trigger a callout message that contains a primary button (e.g. "SUMMARIZE-GENERIC", “SUMMARIZE-PROVIDER”).
3. Observe the strings on the Primary button.

[Expected result]:

• The strings are vertically centered on the Primary button.

[Actual result]:

• The strings on the primary button are not vertically centered and appear shifted downward.

[Additional notes]:

• Attached is a screenshot of the issue.

Comment 1

[Meg Viar [:mviar]]

We were unable to reproduce across multiple engineers and dev environments. If you see something like this again, please let us know and we can reopen the bug.

Comment 2

[Valentin Bandac [:vbandac], Ecosystem QA]

The issue is still reproducible during testing. It is significantly more noticeable on Windows 10 and Windows 11, where the visual inconsistency is easier to observe.
On Linux and macOS, the button label appears to be slightly vertically misaligned, with the text positioned a few pixels lower than the visual center of the button; however, it is less pronounced and requires closer inspection to notice.
Based on the current results, the issue remains present on all tested platforms, with the most visible manifestation occurring on Windows.

Comment 3

[Meg Viar [:mviar]]

Thanks, Valentin. I'll reopen the bug so we can revisit it during our next triage.

Comment 4

[Meg Viar [:mviar]]

Attachment: Win10.png

Here's what I saw on Windows 10 - less noticeably off center than your example I think, but does seem to be more bottom aligned.

Comment 5

[Meg Viar [:mviar]]

Attachment: win112026-07-13 132610.png

I did reproduce on Windows 11.

Comment 6

[Dan Mosedale (:dmosedale, :dmose)]

The Hackpot front-end triage agent generated the following, but keep in mind that it came with a confidence level of "medium":

Comment 7

[Hackbot]

Likely root cause (from code inspection, not verified at runtime):

The callout primary/secondary CTAs are styled in browser/components/asrouter/content-src/styles/_feature-callout.scss (the .action-buttons .primary, .secondary rule, ~lines 635-645; compiled to content/components/asrouter-newtab-multistage/asrouter-newtab-multistage.css ~lines 775-785). They rely on padding: 4px 16px + a fixed line-height: 16px to reach min-height: 24px, but the buttons themselves do not flex-center their label. Their container .action-buttons uses align-items: stretch (~line 614), so a button can be stretched taller than its natural 24px by a taller sibling; the label is then positioned by font metrics/line-height rather than by the layout box and sits below the visual center. Because the fixed line-height: 16px under-counts Segoe UI's real metrics, the downward shift is pronounced on Windows and only a couple of px on macOS/Linux — matching the reported platform pattern.

Proposed fix: add display: flex; align-items: center; justify-content: center; to the .primary, .secondary rule in _feature-callout.scss so the label is centered by layout regardless of stretch or font metrics, then regenerate the bundled CSS. (Alternative/complement: change .action-buttons align-items: stretch → center so buttons keep their 24px height, leaving the inner .split-button-container's own stretch intact.)

Verification anchor: browser/components/asrouter/tests/browser/browser_feature_callout.js (plus _panel.js, _in_chrome.js). No existing test asserts CTA label centering; a check on computed vertical alignment of the primary CTA label would guard against regression.

Not a regression — reproduces on 152/153/154, so this is long-standing styling, not a recent change.

This is an automated analysis result. If this result is incorrect please add a needinfo and feel free to correct the error.

Comment 8

[Dan Mosedale (:dmosedale, :dmose)]

For whoever ends up working on this bug, it would be great to get some feedback on the above text, whether it was helpful, distracting, incorrect, whatever.