1913452 - Unnecessary scrollbar on new-tab page when browsing new-tab wallpapers

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. (optional but helpful) Configure Firefox (or your OS) to get into "always show scrollbars" mode (i.e. turn off overlay scrollbars). On macOS and Windows 11, this is in your system settings; on Linux, you can toggle this in Firefox preferences with the "Always show scrollbars" checkbox.
2. Open a new tab.
3. Click the cog icon.
4. Click "abstract" or "photographs".

ACTUAL RESULTS:
A new scrollbar appears that's nearly the height of the window. (This displays alongside the regular new-tab scrollbar, if you've got "always show scrollbars" enabled)

EXPECTED RESULTS:
No such scrollbar.

DIAGNOSIS:
Poking in devtools, I found the issue; we've got an element that's height: 100%, which also has margin-top and margin-bottom (both set to 16px), which makes it trivially overflow.

We should reduce the height to height: calc(100% - 32px) so that it exactly fills the containing block (without the margins making it overshoot). (Eventually we can make it height:stretch instead, but we don't have that syntax yet; that's bug 1789477.)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing the double-scrollbar

Comment 2

[Daniel Holbert [:dholbert]]

Relevant styles:
https://searchfox.org/mozilla-central/rev/2455e4d6388cbdeadb44b9633b971a65a98b504c/browser/components/newtab/css/activity-stream-linux.css#2083,2088,2092,2099

.wallpaper-list {
...
  margin: 16px 0;
...
.wallpaper-list.category {
...
  height: 100%;

Those decls are what give this element a margin-box height of 100%-plus-16px-plus-16px, which makes it overflow.

We should reduce the height to height: calc(100% - 32px)

Strictly speaking, the scrollbar goes away if I use calc(100% - 16px) -- I suspect the bottom 16px doesn't matter here because it doesn't create scrollable overflow. But we should still probably subtract 32px for robustness; it's not great to be needlessly pushing a margin off the bottom of the scrollport.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: Bug 1913452: Account for margin when sizing new-tab's wallpaper list to 100% height, to avoid unnecessary scrollbar. r?#home-newtab-reviewers

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a3ba31184e36
Account for margin when sizing new-tab's wallpaper list to 100% height, to avoid unnecessary scrollbar. r=home-newtab-reviewers,desktop-theme-reviewers,sfoster,maxx

Comment 5

[Serban Stanca [:SerbanS]]

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