Overlapping content on about:networking page with reduced width
Categories
(Toolkit :: Themes, defect, P3)
Tracking
()
People
(Reporter: asoncutean, Assigned: aarushivij)
Details
(Keywords: regression)
Attachments
(4 files)
Affected versions
- 75.0a1 (2020-03-05)
- 74.0
Affected platforms
- Windows 10
- Ubuntu 18.04
- macOS 10.15
Steps to reproduce
- Go to about:networking
- 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
- I can narrow the regression range to the following:
- Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=df9beb781895fcd0493c21e95ad313e0044515ec&tochange=6ebc251bd288c268b020815025b05854ccde5c08
Additional notes
- No functionality is broken
Reporter | ||
Updated•4 years ago
|
Updated•4 years ago
|
Comment 1•4 years ago
|
||
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.
Updated•4 years ago
|
Updated•4 years ago
|
Assignee | ||
Comment 2•4 years ago
|
||
Hello,
Can I take up this issue?
Should it look as in the attached image?
Thanks :)
Aarushi
Assignee | ||
Updated•4 years ago
|
Comment 3•4 years ago
|
||
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 | ||
Comment 4•4 years ago
|
||
Updated•4 years ago
|
Assignee | ||
Comment 5•4 years ago
|
||
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
Updated•4 years ago
|
Pushed by dgottwald@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/b9355b941f2f Overlapping content on about:networking page with reduced width r=dao
Comment 7•4 years ago
|
||
bugherder |
Updated•4 years ago
|
Reporter | ||
Comment 8•4 years ago
|
||
This issue is fixed with Fx 76 (2020-03-26) on Windows 10 and Ubuntu 18.04.
Description
•