2031405 - Settings page navbar lacks max-width and breaks layout due to inconsistent breakpoints

Status: RESOLVED FIXED

(Firefox :: Settings UI, defect)

Description

[akulyk]

The Settings (preferences) navbar can appear excessively wide, particularly when the Your browser is being managed by your organization notice is displayed. A max-width is not enforced, leading to visual inconsistency compared to design expectations.

Additionally, there is a responsive “in-between” layout issue between 830px and 950px viewport widths where the navbar collapses but the organization notice does not reposition correctly. This appears to be caused by mismatched breakpoints across stylesheets (e.g., preferences.css, moz-page-nav.css, and nav-notice.css, using values like 52rem, 830px, and 950px).

Fix should:

• Add a consistent max-width for the navbar
• Align breakpoints across relevant CSS files
• Ensure the organization notice transitions correctly during collapse states without intermediate broken layouts

Comment 1

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

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

Comment 2

[akulyk]

Attachment: Bug 2031405 - Settings page navbar lacks max-width and breaks layout due to inconsistent breakpoints r=#recomp-reviewers

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/69ad2061f5c9
https://hg.mozilla.org/integration/autoland/rev/24ac9e0333bb
Settings page navbar lacks max-width and breaks layout due to inconsistent breakpoints r=desktop-theme-reviewers,mstriemer

Comment 4

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/24ac9e0333bb

Comment 5

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/24ac9e0333bb