2063261 - Container icons are clipped in context menus and about:preferences#containers

Status: VERIFIED FIXED

(Firefox :: Containers, defect, P2)

Description

[Alex Cornestean]

Attachment: 2026-08-13_14h08_00.png

Affected versions:
Nightly 155.0a1 (20260812202037)

Description:
Container icons inside the colored container circles are cut off around the edges.
On Windows and Linux the icons are clipped in every context menu entry point and in the about:preferences#containers page.
On macOS, the icons are clipped only in the about:preferences#containers page, as the container context menus don’t show the colored container circle on this particular platform.

Also some icons might be off-center inside the colored circles, as far as I can tell as the padding around the icons looks thinner in some parts.

See attached screenshot for more details.

Steps to reproduce:

1. Go to about:preferences#containers and create containers with all the available icons
2. Observe the container icons are clipped around the edges in all context menus on Windows and Linux, and in the container list in about:preferences on Windows, Linux and macOS.

Expected results:
Container icons inside the colored container circles should be fully displayed.

Actual results:
Container icons are clipped in context menus and about:preferences#containers

Comment 2

[Andrea Marchesini [:baku]]

The issue is the artwork. Some glyphs are drawn flush against the 16x16 viewBox, with long straight edges sitting exactly on the boundary: chill has 8.2 units of dead-straight vertical edge on x=0 and x=16 (more than half the icon height), briefcase 6.6. That is what reads as "cut off" once there is tinted background on both sides of it. Separately, the ink boxes are inconsistent across the set (briefcase 16x15, food 13x14, tree 13x16, fence 14x13), which is why the padding inside the circle looks uneven from container to container.

Comment 3

[Andrea Marchesini [:baku]]

It's actually a CSS issue. I was wrong in comment 2. Working on a fix.

Comment 4

[Andrea Marchesini [:baku]]

Attachment: Bug 2063261 - Stop the round container icon background from clipping the icon itself

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/65a30e4d9f70
https://hg.mozilla.org/integration/autoland/rev/29777a9c8484
Stop the round container icon background from clipping the icon itself r=desktop-theme-reviewers,tgiles

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/29777a9c8484

Comment 7

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:baku, 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-firefox155 to wontfix.

For more information, please visit BugBot documentation.

Comment 8

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Containers icons are cropped in the edges
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing: n/a
• Risk associated with taking this patch: low
• Explanation of risk level: This is just a missing CSS entry
• String changes made/needed?: none
• Is Android affected?: no

Comment 9

[Andrea Marchesini [:baku]]

Attachment: Bug 2063261 - Stop the round container icon background from clipping the icon itself

Original Revision: https://phabricator.services.mozilla.com/D319559

Comment 10

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/83845f376dc2
https://hg.mozilla.org/releases/mozilla-beta/rev/55696d61662a

Comment 11

[Alex Cornestean]

Verified as Fixed. Tested on the latest Nightly (156.0a1/20260819210808) and Beta (155.0b3/20260820023821 from https://treeherder.mozilla.org/jobs?repo=mozilla-beta&revision=55696d61662a7a48bbb944f0215b024f52c46ef0) under Windows 11, Ubuntu 25.10 and macOS 11.3.1.

On Windows and Linux, container icons from both context menus and about:preferences#containers are now fully displayed, without experiencing any clipping.
On macOS, container icons from about:preferences#containers are now fully displayed, without any clipping.

Note that on Beta, the Nova pref had to be enabled in about:config to verify the bug, as without Nova enabled, the issue does not occur.