1985029 - Mobile card from about:protections spills out of its container (looking like bottom padding is missing), with updates to CSS grid percentage row-sizing behavior

Status: VERIFIED FIXED

(Firefox :: Protections UI, defect)

Description

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Attachment: ss showing the issue

Found in

• 143.0b3

Affected versions

• 144.0a1
• 143.0b3

Tested platforms

• Affected platforms: macOS 13, Windows 11, Ubuntu 22.04
• Unaffected platforms: none

Steps to reproduce

1. Go to about:protections
2. Scroll down until you reach the "Block ad trackers across more devices" section and observe the text at the bottom

Expected result

• There should be consistent bottom padding under the text

Actual result

• There is no bottom padding below the text and it appears cramped

Regression range

• Mozregression points to bug 1957244

Additional notes

• See the attached ss

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

:TYLin, since you are the author of the regressor, bug 1957244, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 2

[Daniel Holbert [:dholbert]]

I can reproduce, but only in a fresh profile -- this "Block ad trackers across more devices" snippet doesn't show up in my main profile (possibly because Firefox already knows I've got Firefox-for-Android? not sure.)

In any case -- it looks like our new rendering is technically correct, at a rendering-engine level. if I extract the markup here into a standalone testcase, Chrome matches our new rendering, not our old rendering. So: the correct fix here is to adjust this bit of content's CSS to add the padding in a way that shows up.

(I'll post a testcase shortly to have something concrete to demonstrate the difference and to poke at.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (standalone)

Here's a standalone version of this page -- clearly missing various styles/images, but good enough to get the point across.

The old behavior (in e.g. Firefox 141) has the red-outlined box entirely contained within the cyan-outlined box.

The new/interoperable behavior (in e..g Firefox 144.0a1 and in Chrome) has the red-outlined box spilling out of the cyan-outlined box.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot comparing Firefox release 141 (left) vs. Nightly 144 (middle) vs Chrome 140 (right)

Here's a screenshot showing that Chrome agrees with our new behavior here.

(Ignore the fact that some images are missing in Chrome; those are just built-in Firefox-internal images like chrome://browser/content/logos/etp-mobile.svg which the testcase happens to use but which Chrome-the-browser doesn't know anything about.)

Comment 5

[Daniel Holbert [:dholbert]]

Aha, so I think this is from these styles:
https://searchfox.org/firefox-main/rev/856a307913c2b73765b4e88d32cf15ed05549cae/browser/components/protections/content/protections.css#627,629

.etp-card {
...
  grid-template-rows: 20% auto auto;

(--> Adding a dependency on the bug that added that^ line, bug 1612091.)

Before bug 1957244 landed, we were unable to resolve the 20% row-height here (because the grid has no specified height), so we just treated it as auto, I think.

bug 1957244 lets us resolve that percentage, though (by running the grid algorithm multiple times -- once to establish the height of the grid, and then again to resolve percentages against that height). This does lead to content spilling out of the grid in some cases, as it does here.

I think the correct fix is just to replace 20% with auto here - I think that's what it was already behaving as, effectively.

Comment 6

[Daniel Holbert [:dholbert]]

(Reclassifying to Firefox|Protections UI, since that's where the fix will need to happen; and self-assigning since I intend to post a patch.)

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: Bug 1985029: Use 'auto' instead of unresolvable '20%' in grid-template-rows declaration in 'about:protections' CSS. r?#desktop-theme-reviewers

The 20% here has always been unresolvable, so it has effectively always meant
"auto" in our implementation of the CSS grid algorithm, until recently.

Recently, we enabled a behavior-change to our CSS grid implementation that lets
us resolve otherwise-unresolvable percentages like this one (by laying out the
grid multiple times so that we can establish a height that we can then resolve
the percentage against). The CSS grid spec requires us to do this.

As a result, we're now resolving this formerly unresolvable 20% row-height,
which produces an unintended layout on the about:protections page (with the
first row being a bit too tall and pushing lower content out of its container).

We can get back to the intended layout by just using auto instead of 20%
here.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ba46017e93ff
https://hg.mozilla.org/integration/autoland/rev/1c71501c0ef4
Use 'auto' instead of unresolvable '20%' in grid-template-rows declaration in 'about:protections' CSS. r=desktop-theme-reviewers,emilio

Comment 9

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/1c71501c0ef4

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

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

For more information, please visit BugBot documentation.

Comment 11

[Daniel Holbert [:dholbert]]

Verified fixed in latest Nightly (testing on Linux).
mozregression --launch 2025-08-26 is "bad"
mozregression --launch 2025-08-27 is "good"

I'll request beta uplift.

Comment 12

[Daniel Holbert [:dholbert]]

Attachment: Bug 1985029: Use 'auto' instead of unresolvable '20%' in grid-template-rows declaration in 'about:protections' CSS. r?#desktop-theme-reviewers

The 20% here has always been unresolvable, so it has effectively always meant
"auto" in our implementation of the CSS grid algorithm, until recently.

Recently, we enabled a behavior-change to our CSS grid implementation that lets
us resolve otherwise-unresolvable percentages like this one (by laying out the
grid multiple times so that we can establish a height that we can then resolve
the percentage against). The CSS grid spec requires us to do this.

As a result, we're now resolving this formerly unresolvable 20% row-height,
which produces an unintended layout on the about:protections page (with the
first row being a bit too tall and pushing lower content out of its container).

We can get back to the intended layout by just using auto instead of 20%
here.

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

Comment 13

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: Broken layout (content overflowing or pushing right up to a border) on about:protections page
• Code covered by automated testing: no
• Fix verified in Nightly: yes
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: N/A
• Risk associated with taking this patch: Very low.
• Explanation of risk level: One-line CSS change, affecting this one card on this one internal page, simplifying its grid layout to ask for the layout that we've been inadvertently falling back to up until this point.
• String changes made/needed: None
• Is Android affected?: no

Comment 14

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/35f2dc596c99
https://hg.mozilla.org/releases/mozilla-beta/rev/24ffdee978d6

Comment 15

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Verified as fixed using Firefox Nightly 144.0a1 (2025-08-27) and Firefox 143.0b6 (treeherder build fro Comment 14) on macOS 13, Windows 11 and Ubuntu 22.04.