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
 }

See also T21567.

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

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:

After:

No notices:

Looks very clean.

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

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

Needs QA. Will be in production 2nd March.

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.

In T325219#8641856, @bwang wrote:

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.

In T325219#8641856, @bwang wrote:

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:

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!

(https://www.mediawiki.org/wiki/Phabricator/Help#File_visibility)

Done =)