Closed Bug 1620281 Opened 4 years ago Closed 4 years ago

Overlapping content on about:networking page with reduced width

Categories

(Toolkit :: Themes, defect, P3)

defect

Tracking

()

RESOLVED FIXED
mozilla76
Tracking Status
firefox-esr68 --- wontfix
firefox74 --- wontfix
firefox75 --- wontfix
firefox76 --- verified

People

(Reporter: asoncutean, Assigned: aarushivij)

Details

(Keywords: regression)

Attachments

(4 files)

Attached image screenshot_issue.png

Affected versions

  • 75.0a1 (2020-03-05)
  • 74.0

Affected platforms

  • Windows 10
  • Ubuntu 18.04
  • macOS 10.15

Steps to reproduce

  1. Go to about:networking
  2. Reduce the page width

Expected result

  • The content is readjusted accordingly

Actual result

  • The content is overlapping, the hover effect covers only partially its corresponding button

Regression range

Additional notes

  • No functionality is broken
Has Regression Range: --- → yes
Has STR: --- → yes

This isn't a Core:Layout bug, it looks like a problem with the styling of the in-content UI pages. In particular, there's a media query

@media (max-width: 830px) {
  #categories {
    width: 118px;
  }

(see https://searchfox.org/mozilla-central/rev/13b081a62d3f3e3e3120f95564529257b0bf451c/toolkit/themes/shared/in-content/common.inc.css#744) that narrows the Categories column, but the items within it aren't adjusted so that they still fit -- e.g. taking away a bunch of their margin would help.

Component: Layout → Themes
Product: Core → Toolkit
Priority: -- → P3
Attached image network.png

Hello,
Can I take up this issue?
Should it look as in the attached image?
Thanks :)
Aarushi

Flags: needinfo?(dao+bmo)

Adding margin-right to #categories when the window is narrow isn't the right approach here. Look at the box dimensions shown when you select the div#categories element in the Inspector to see how the content doesn't fit properly.

What I think you need to do is to remove (or at least greatly reduce) the margin-inline-{start,end} from #categories > .category in the narrow-window case. (The categories list doesn't need to be inset so far from the edge of the window.) It's probably good to reduce its padding-inline-{start,end} as well.

Assignee: nobody → aarushivij
Status: NEW → ASSIGNED
Attached image AfterFix.png

Hello Jonathan,
I have made the changes according to the comment :)
And pushed the patch.
Please review, shall make any further changes if required.
Thanks
Aarushi

Flags: needinfo?(dao+bmo)
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b9355b941f2f
Overlapping content on about:networking page with reduced width r=dao
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla76

This issue is fixed with Fx 76 (2020-03-26) on Windows 10 and Ubuntu 18.04.

You need to log in before you can comment on or make changes to this bug.