NavigationHeader block styling is inconsistent

[jjchrisdiehl]

The NavigationHeader block found in @automattic/components provides a default padding on smaller screens:

wp-calypso/client/components/navigation-header/style.scss

Lines 11 to 13 in b4c8729

	@media (max-width: $break-small) {
	padding: 16px;
	}

While this works for many screens, such as the Domains section:

768px	375px

It can make page titles feel out of alignment on other sections:

768px	375px

I'm not sure what the best path forward is, but I suppose standardizing the way we drop these components into a wider page layout might be useful here.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Appearance & Themes: The issue relates to the styling of the NavigationHeader block, which is a part of the site's appearance.
• [Feature] Navigation: The problem specifically concerns the NavigationHeader block, which impacts navigation elements within the interface.
• [Feature] Mobile Experience: The issue highlights inconsistencies in different screen sizes, indicating it affects the mobile experience.

[matt-west]

Thanks for highlighting this @jjchrisdiehl. We’ll be standardising page headers as part of the hosting dashboard redesign which should solve this.