Left alignment of Favorites page in wide format does not match Saved Searches (and About) page

[dayotte]

The left alignment of the Favorites page in wide format does not match that of the Saved Searches page or the About page. This is particularly noticeable when switching between Favorites and Saved Searches pages. All three pages have the same alignment at narrower formats.

[greatislander]

@dayotte This is consistent with the different designs for these two pages.

About/Saved Searches use a single-column layout on desktops, set to the width defined here: https://pinecone.platform.coop/components/detail/page.html

Favourites uses a two-column grid so as to properly accommodate resource cards: https://pinecone.platform.coop/components/detail/favorites.html

The convention @cherylhjli instituted in the design system was that the page header matches the width of the page content, which I think makes sense. Two solutions come to mind here:

1. Make the heading design different to make the variation between these layouts more explicit. You brought this up the other day, and maybe it could help with this.
2. Display Saved Searches in a matching two-column layout with a corresponding header width.

Thoughts @cherylhjli and @dayotte?

[cherylhjli]

Yeah, I think if these pages were populated it'd definitely visually make more sense. As Ned mentioned, favourites is wider because it accommodates cards (8 columns), whereas saved searches is a list (6 columns). I think my preference is for #1 - to use a different background image so that it's clearly different and doesn't look like we made a mistake with the formatting.

[greatislander]

@dayotte Can you identify which visual design element should be used for saved searches/about? (Or, if we want to change favorites, what that should be?)

[dayotte]

@greatislander @cherylhjli thanks for clarifying. I think it makes the most sense to leave the About page as-is (since the existing background is as intended) and therefore change Favorites to the alternate background (see attached). The header text background is Blue 50 (E3EAE8) (worked best with the background image colours). Background is in the original AI file as well.