Set initial header height

[gfellerph]

Web components are only shown when they are defined - meaning when the JavaScript has been downloaded and parsed. At this moment, the HTML and CSS have already rendered on the page and web components are plopping in. To prevent layout shift, the styles package should set the height of <post-header> initially. The styles should also take into account that the header is flexible, for example the title is optional and has an influence on the height.

Tasks

Preview Give feedback

1. chore(components, styles): move header css variables to styles package #4663
   +0
2. Add tests to ensure there is no layout shift when loading the header
3. Layout shift should be prevented on pages that are not scrolled and also pages that are scrolled on load
4. Add styles for initial header height based on what components the header is composed of

[alionazherdetska]

[alizedebray]

Resolution:
Header custom properties will be moved to the styles package, they can then be used to add a min-height to the post-heade:not(:defined) element.