2053746 - [Nova] Insufficient spacing between Toolbar buttons on Yoga touch devices in portrait mode when Nova is enabled

Status: VERIFIED FIXED

(Firefox :: Toolbars and Customization, defect, P1)

Description

[Camelia Badau [:cbadau], Desktop Test Engineering]

Attachment: IMG_3144.MOV

Found in

• Nightly 154.0a1

Affected versions

• Nightly 154.0a1

Tested platforms

• Affected platforms: Windows 11 ARM (Lenovo YOGA)

Preconditions

• Lenovo Yoga device is in tablet mode
• Firefox is opened in Portrait mode
• the browser.nova.enabled pref is set to "true"

Steps to reproduce

1. Observe the spacing between the Toolbar buttons (e.g. Account button, Extensions button).

Expected result

• Toolbar buttons have consistent spacing and alignment.

Actual result

• The toolbar buttons are displayed too close together. The spacing between toolbar buttons is noticeably reduced compared to the non-Nova UI, resulting in a crowded appearance. Please see the attachment.

Regression range

• Not applicable.

** Additional notes**

• The issue is only reproducible in Portrait mode. In Landscape mode, the Toolbar buttons are displayed correctly with consistent spacing.

Comment 1

[Stephen Thompson [:sthompson]]

Thanks, :cbadau!

Aside from looking strange, it would probably be hard to tap a specific toolbar button when the buttons have so little spacing.

Comment 2

[kpatenio]

Wanted to share some steps that helped me reproduce the issue on a non Lenovo Yoga device without tablet mode support:

• Set Windows Display setting to Portrait
• Set Display resolution to 800 x 1280
• Set Window density (in Firefox) to Touch. Alternatively, set browser.uidensity=2

I tested these steps on a Dell XPS 15 9570.

Comment 3

[kpatenio]

The token --toolbarbutton-padding-inner-touch-narrow assigned to --toolbarbutton-padding-inner in this CSS block https://searchfox.org/firefox-main/rev/91d6cd2d1476bca635bb96f82ca34eda283b5460/browser/themes/shared/toolbarbuttons.css#22 might be the cause. Commenting out the --toolbarbutton-padding-inner override on line 22 fixes the problem. Looks like we set --toolbarbutton-padding-inner-touch-narrow to 0 when Nova is enabled https://searchfox.org/firefox-main/rev/91d6cd2d1476bca635bb96f82ca34eda283b5460/toolkit/themes/shared/design-system/dist/tokens-shared.css#1101.

Comment 4

[kpatenio]

Per this Slack thread, this will be addressed separately via a Figma sync.

Comment 5

[Mark Striemer [:mstriemer]]

Attachment: Bug 2053746 - Fix touch padding in the toolbar r?#desktop-theme-reviewers!

Comment 6

[kpatenio]

Reassigning to Mark Striemer since he submitted a patch.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/4f3072b3b281
https://hg.mozilla.org/integration/autoland/rev/42259f83b3a7
Fix touch padding in the toolbar r=desktop-theme-reviewers,emilio

Comment 8

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/42259f83b3a7

Comment 9

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:mstriemer, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox154 to wontfix.

For more information, please visit BugBot documentation.

Comment 10

[Camelia Badau [:cbadau], Desktop Test Engineering]

The issue is verified fixed on Windows 11 ARM (Lenovo YOGA) and on Windows 11 on a Dell G5 5590 (following the steps from comment 2) using the latest Nightly 155 Treeherder build (buildID: 20260812035358): the toolbar buttons now have consistent spacing and alignment.

Comment 11

[Bogdan Birsan-Caliman, DTE]

Hello!
Marking this issue as Verified Fixed as the problem has been resolved.