2033165 - Nova content feed layout does not render four column layout

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Maxx Crawford [:maxx]]

From :thecount

Part of the changes for 2021460 caused styles from Base.scss to bleed over into the nova <main> element. This was introduced when bug 2021460 moved the Nova content from a div to a main, which is semantically correct.

This caused the non Nova main rules to now apply to the new Nova main. Essentially the non Nova main isn't specific enough. So once we started using main in Nova, we started getting css rules we didn't intend.

Possible solutions:

1. Override the css rules that are bleeding over, which is safer short term. As it fixes the symptom in the most minimal way, without impacting non Nova styles at all.
2. Change the non Nova styles to be more specific. This fixes the root problem, which means problems like this would never happen again, but it also means we're making changes to non Nova, which adds additional risk to breaking the non Nova experience.

Scott recommend option 2.

Comment 1

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

Set release status flags based on info from the regressing bug 2021460

Comment 4

[Maxx Crawford [:maxx]]

Attachment: Bug 2033165 - Fix Nova page layout and component alignment ?#home-newtab-reviewers

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/017ebc905744
https://hg.mozilla.org/integration/autoland/rev/fd538ba6833c
Fix Nova page layout and component alignment  ?#home-newtab-reviewers r=home-newtab-reviewers,thecount

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9e7c0b3787e6
https://hg.mozilla.org/integration/autoland/rev/ac1f47499921
Revert "Bug 2033165 - Fix Nova page layout and component alignment ?#home-newtab-reviewers r=home-newtab-reviewers,thecount" for causing bc failures @browser_parsable_css.js.

Comment 7

[agoloman]

Backed out for causing bc failures @browser_parsable_css.js.

• Backout link
• Push with failures
• Failure Log

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/daa5ea3b8774
https://hg.mozilla.org/integration/autoland/rev/850645276304
Fix Nova page layout and component alignment  ?#home-newtab-reviewers r=home-newtab-reviewers,thecount

Comment 9

[rperta]

https://hg.mozilla.org/mozilla-central/rev/850645276304

Comment 10

[Maxx Crawford [:maxx]]

Attachment: Bug 2033165 - Fix Nova page layout and component alignment ?#home-newtab-reviewers

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

Comment 11

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: This fix impacts how many ads are displayed (when Nova is enabled) for the content feed and could impact revenue.
• Code covered by automated testing?: yes
• Fix verified in Nightly?: yes
• Needs manual QE testing?: yes
• Steps to reproduce for manual QE testing: See testing steps in https://phabricator.services.mozilla.com/D295294
• Risk associated with taking this patch: low
• Explanation of risk level: CSS only, and all the changes are behind a pref
• String changes made/needed?: No
• Is Android affected?: no

Comment 12

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/99c6672dbe3e
https://hg.mozilla.org/releases/mozilla-beta/rev/9d6bc3e50774

Comment 13

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the latest Firefox Nightly 152.0a1 (Build ID: 20260421211246) on Windows 10 x64, macOS 15.7.3, and Ubuntu 24.04.1.

• After following the test plan from Phabricator, I can confirm the following:
  • At ~1720px, the content feed correctly switches to a 4‑column layout.
  • At ~1600px, the content feed switches back to a 3‑column layout, as expected.
  • When the content feed is present, the logo and sidebar widget are properly displayed and align with the customization panel button.
  • The search bar width behavior matches the requirements: minimum 4 columns, expanding to 6 columns when available, and up to 10 columns at maximum width.
  • The logo/sidebar spacing remains locked to the page sides rather than centered, consistent with the updated layout rules.
  • For Classic mode, after enabling the required preference and restarting the browser, the non‑Nova breakpoints match the expected release behavior.

Comment 14

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the try build Firefox Beta 151.0b2 (Build ID: 20260423184233) from treeherder on Windows 10 x64, macOS 15.7.3, and Ubuntu 24.04.1.

• After following the test plan from Phabricator, I can confirm the following:
  - At ~1720px, the content feed correctly switches to a 4‑column layout.
  - At ~1600px, the content feed switches back to a 3‑column layout, as expected.
  - When the content feed is present, the logo and sidebar widget are properly displayed and align with the customization panel button.
  - The search bar width behavior matches the requirements: minimum 4 columns, expanding to 6 columns when available, and up to 10 columns at maximum width.
  - The logo/sidebar spacing remains locked to the page sides rather than centered, consistent with the updated layout rules.
  - For Classic mode, after enabling the required preference and restarting the browser, the non‑Nova breakpoints match the expected release behavior.