Page MenuHomePhabricator

Sitenotice should be 0px tall on Vector 2022 when it is empty
Open, MediumPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
It appears to me that the sitenotice is reserving a 24px vertical space in Vector 2022, even when there is no central notice to display.

What should have happened instead?:
The sitenotice div should be 0px tall in Vector 2022 when it is empty, as happens in Vector legacy.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Vector legacy:

Sitenotice Vector legacy.png (215×1 px, 90 KB)

Vector 2022:

Sitenotice Vector 2022.png (192×1 px, 62 KB)

I can imagine a developer saying "It's 24px, what's the big deal?" As you have seen in the long discussions about Vector 2022, wasted white space is extremely bothersome to many editors. I noticed this discrepancy because I had loaded a set of What Links Here pages in which the first clickable link was displayed at the bottom of the page in Vector legacy, but required scrolling in Vector 2022. With these wasted 24px collapsed, the link would have been displayed. A little scrolling may not seem like much, but when you are a wikignome loading 100 of these pages every day to fix errors, that's 100 instances of unnecessary scrolling every day.

Event Timeline

Here's load.php in Vector:

#siteNotice {
  position:relative;
  text-align:center;
  margin:0
 }

Here's load.php in Vector 2022:

#siteNotice {
  font-size:0.8em;
  margin:24px 0;
  position:relative;
  text-align:center
 }

Change 890486 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Only apply vertical marign to #siteNotice content when non-empty

https://gerrit.wikimedia.org/r/890486

Esanders added a subscriber: Esanders.

The above patch may slightly change the spacing between multiple notices, but with margin-collapse it will be at most 24px. A little more spacing between distinct messages is probably a good thing...

Before:

image.png (330×1 px, 63 KB)

After:

image.png (339×1 px, 63 KB)

No notices:

image.png (159×1 px, 34 KB)

Looks very clean.

(& A reminder that the default 1 logo, 1 sentence banners have ... unnecessarily large internal padding 😅)

BCornwall removed a subscriber: BCornwall.
BCornwall added a subscriber: BCornwall.

Change 890486 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Only apply vertical margin to #siteNotice content when non-empty

https://gerrit.wikimedia.org/r/890486

We talked about this today, and apparently that whitespace is intentional. Someone should be weighing in with more information on this today, but we may need to revert the patch.

The original spacing between the header and the page title is per design, I believe there should be 24px between the header, page title, and site notice (when its not empty). If I recall correctly we implemented the spacing this way because we ran into some cases where wikis defined site notices with empty elements. This made styling a bit trickier, so we ended up applying margins on the site notice regardless of if its empty or not, taking advantage of margin collapsing.

If there's a need to reduce the spacing in general, perhaps that should be a different task or this should be turned to a feature request.

The original spacing between the header and the page title is per design, I believe there should be 24px between the header, page title, and site notice (when its not empty). If I recall correctly we implemented the spacing this way because we ran into some cases where wikis defined site notices with empty elements. This made styling a bit trickier, so we ended up applying margins on the site notice regardless of if its empty or not, taking advantage of margin collapsing.

Why would Vector 2022 be set up differently from Vector? See my comment from Dec 14 2022 with code snippets from load.php.

The original spacing between the header and the page title is per design

If this is reverted we should leave a comment explaining this, as just looking the code it looks accidental.

In general, the 24px between header and topmost sitenotice seems unnecessary. There is already padding at the bottom of the header, and most sitenotices have some as well. This is just the most visible when there's no banner at all.

If you're worried about a rare edge case, that might be worth a much smaller "header-to-top-sitenotice" padding. But adding 24px of padding to every page on every wiki seems like a downgrade from Vector Classic.

But adding 24px of padding to every page on every wiki seems like a downgrade from Vector Classic.

I disagree. It gives a much less messy view of the page to have some extra space there at the top. It is much easier on the eyes and brings more tranquility. One of the points the design intended to fix was the perception of the site being 'messy' in the experience of users (not editors) with too many options too close together. I think it achieves that and the user testing showed that as well if i'm remember correctly.

Additionally, we have the sticky header now which makes extra space at the top much less of a problem overall.

wasted white space is extremely bothersome to many editors.

If we'd let some wikipedians design stuff, they'd jam every inch of the screen full with toggles and widgets and remove all margin and padding. But we already have monobook, so....

I've been using this for one and a half year and I too 'felt' that the whitespace at the top was 'too much' at first. But it's not. The human mind is weird and it doesn't like change, but you don't even notice 3 months in.

If we'd let some wikipedians design stuff, they'd jam every inch of the screen full with toggles and widgets and remove all margin and padding.

Even if technical folks tend to be a little more chaotic in their design that doesn't make their point moot automatically. I also think it looks cleaner with the patch since it lets the main content present itself more front-and-center. Add to that that the main page headings are rather close together, it makes the discussion's padding feel out of place.

(This is coming from someone that really likes the constrained character width of Vector 2022!)

Additionally, we have the sticky header now which makes extra space at the top much less of a problem overall.

I believe this issue is about the top-of-page presentation. The sticky bar is a mis-design for another problem/ticket. ;)

Whitespace certainly is an important element in design as it's possible to make things a chaotic mess (see KDE) but it's very possible to overdo it (see Gnome applications).

@BCornwall exactly, my comment was about the top of the page, not the sticky header (its padding is quite good). The excess v-space is easy to see for small screens:

Screen Shot 2023-02-25 at 22.26.50.png (1×1 px, 660 KB)

ovasileva triaged this task as Medium priority.Mar 6 2023, 10:53 PM
ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.

Screen Shot 2023-12-11 at 14.04.29 .png (305×1 px, 100 KB)

This problem does not appear to be fixed in the Zebra redesign (see screen shot).

Hey @Jonesey95 Phabricator has been annoying and made your image private. Could you please change the settings? Thanks!