🦄 Page component alignment and spacing

[sarahill]

Problem

The page component displays a page header on most pages in the Admin. Today, the alignment and spacing of the content in the page header area is inconsistent and can result in a jumpy experience between pages.

Solving this problem will help to level up the Admin and move us toward a set of consistent spacing we can use to further improve similar issues.

Useful links:

• Project brief
• Vault project
• Figma file

Tasks

• [Page] Set spacing between page header and page content #4824
• [Admin UI Kit] Update page component alignment and spacing #4832
• [Page] Deprecate thumbnail property #4733
• [Page] Add minimum height on page header #4773

Potential blockers / considerations

• Forks and custom page components in web
• Spacing between page header and content seems set on content rather than page? This could be a can of worms. Needs investigation. Alex mentioned this may be coming from rendering empty divs for things like conditional banners.

[sarahill]

Context on the thumbnail prop #1711

[sarahill]

The ✨ Quality Crew ✨ will be making updates to the page header variation with border. This is primarily used within Settings and was introduced in the settings redesign. More context on those updates here https://github.com/Shopify/shopify/issues/322184

We will not make any adjustments to the pages using the variation with border since that will be taken care of with the work those folks are doing in settings.

[sarahill]

Lo added a min-height to the page component to make alignment consistent when secondary actions are present or not.

Lo investigated what it would take to adjust spacing between page header and content to make it consistent. We initially thought that page spacing would be an easy fix of just setting the height of the divider that sometimes shows up within the page component, but we found that it would actually involve checking each page, finding out what file it exists in for the web code base, then parsing a 1000+ line file (for the Product detail page for example) to find all the conditional logic for how we set the classes to be able to look in the sass file and figure out where that extra spacing is coming from.

This would be a lot of manual work on individual pages within the Admin.

Closing this issue. We'll reach out to the owners of the sections with inconsistent spacing to let them know some of the causes, mostly conditional logic that is rendering an empty div.