Header moves between pages

[janbrasna]

Description

The new nav (both main menu and fundraiser banner) jumps when navigating between some pages, is shorter on home or about, and taller on products or fx pages.

Steps to reproduce

Navigate between https://www.mozilla.org/about/ and https://www.mozilla.org/products/ and watch the masthead change dimensions.

Expected result

Same height of components.

Actual result

Screen.Recording.2024-12-21.at.10.25.26.mov

Environment

Safari 18.1 @ macOS 15.1

[janbrasna]

It looked like a line-height issue, and it is — m24/base sets on body:

bedrock/media/css/m24/base.scss

Lines 25 to 30 in 2c1388b

	body {
	background-color: $m24-color-white;
	color: $m24-color-black;
	font-family: var(--body-font-family);
	font-variant-ligatures: none;
	line-height: 1.2;

Pages not using the new m24 style specifically only resort to protocol-mozilla-2024 that has:

bedrock/media/css/protocol/protocol-mozilla-2024.scss

Line 142 in 2c1388b

--body-line-height: 1.4;

So these are the differences eventually applied in pencil banner and main nav.

Quick fix would be to set the var(--body-line-height) explicitly on those components, to not inherit any previous value. Otherwise, not sure what the best systematic solution should be.

[janbrasna]

This also applies to menu items in mobile nav:

Screen.Recording.2024-12-22.at.20.42.03.mov

(so the same line-height tweak should make that consistent)

[janbrasna]

Resolved with #16156 for M24 vs. pre-M24 pages, only Fx-themed pages apply different type scale also to these global elements:

[janbrasna]

This currently only reproduces on pages that are slated for removal. No longer worth pursuing.