[Dashboard] Move breadcrumbs from sticky header into page layout

iamsamgibbs commented 1 month ago

Description

This PR resolves an issue where the PageHeading component was part of the PageHeader which resulted in the breadcrumbs and page title being part of the sticky nav on mobile.

The PageHeading component has been removed entirely and the breadcrumbs and page title have been moved into more suitable homes.

This PR also fixes some alignment issues with the page title on ultra-wide screens and puts the page title in line with the content whilst allowing the breadcrumbs to expand out to the left. Which highlighted some spacing issues with the team switcher and general page layout, which this PR aims to resolve.

Had a fair bit of discussion with @melyndav about how this should all work and she has handily provided a figma design for how this should all look: https://www.figma.com/design/gac6xVgGNCAge5Bia933dp/Dashboard?node-id=6760-57700&t=7Q8sbaeEZ1zE6nwl-4

(I'm very sorry if these changes overlap too much with any other alignment fixes or with the nav feature 🥲 )

Testing

On desktop, check that the header has 8px whitespace below the userhub button so there is space between the userhub button and the page content when you have scrolled:

On mobile, the border bottom should be the clear dividing line:

On all pages, check the page title lines up with the page content on a wide screen size:

On mobile, check the page title lines up neatly with the breadcrumbs and that neither the page title nor the breadcrumbs are included in the sticky nav: