Global pages: Update CSS for headers consistency

[taipeicoder]

Fixes:

• p1727338485845669-slack-C06DN6QQVAQ
• Top-level dashboard: Headings are not aligned/inconsistent #94950

Proposed Changes

Currently, the global pages /sites, /domains, /themes, and /plugins header have different padding/margin.
See recording for reference:

Screen.Recording.2024-09-26.at.10.12.06.mov

This PR updates the CSS for headers consistency.

Why are these changes being made?

Contributes to the overall WordPress.com polish.

Testing Instructions

• Ensure that /sites, /domains, /themes, and /plugins have consistent header padding/margin.

Pre-merge Checklist

• [] Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• [] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [] Have you checked for TypeScript, React or other console errors?
• [] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120971

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120971&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120971&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/global-pages-headers-consistency on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~11 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
domains        +23 B  (+0.0%)      +11 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[BogdanUngureanu]

Nice work, @taipeicoder!

I've noticed some small inconsistencies between Domains and Themes. Probably because of the sub-text below the Themes heading.

Screen.Recording.2024-09-27.at.11.37.07.mov

Also, on higher resolutions, the problem is still there:

Screen.Recording.2024-09-27.at.11.40.26.mov

Additionally, I have some mixed feelings about how the Themes heading is positioned now on the page. It feels weird that the heading is not aligned anymore with the theme cards:

I think for P2, domains and Sites pages looks ok because the page content is aligned with the heading.

This can be seen on the Plugins page too (although tbf I think it already happens on production):

Maybe we need some design input in this one? cc @lucasmendes-design 🤔

[taipeicoder]

Also, on higher resolutions, the problem is still there:

Good catch... they have different breakpoints 🤦‍♂️

I've noticed some small inconsistencies between Domains and Themes. Probably because of the sub-text below the Themes heading.

@lucasmendes-design WDYT about dropping the subheading for /themes at least in the global context? That would make it more consistent with the other headers.

[lsl]

Minor, but also noticed domains placeholder checkboxes are following the old alignment during page load.

[fushar]

I've noticed some small inconsistencies between Domains and Themes. Probably because of the sub-text below the Themes heading.

I remember I had "fixed" this issue some time ago, not sure why it comes up again 🤔

• Headers: make heading and action buttons aligned at the top #87631

[fushar]

Maybe we need some design input in this one

I am not saying we shouldn't make quickfixes. It can be done, but realistically, we'll keep running and arguing into these inconsistencies in the future, unless we decided to holistically clean up the layout on these global pages. See: pekYwv-4fp-p2#comment-3689

[fushar]

Additionally, I have some mixed feelings about how the Themes heading is positioned now on the page. It feels weird that the heading is not aligned anymore with the theme cards

Yes, I find it's very awkward. My vote is to align the heading with the actual width of the content. Or, explicitly make it aligned center (but maybe it's weirder)

[taipeicoder]

@BogdanUngureanu @fushar agreed on the points mentioned above, but for now let's address the issue of jumping margins between Sites/P2s and Domains.

There are a couple of things we can follow up on:

1. The Scheduled Updates header looks very different from the rest of the pages. To the point that they have different font families.
   
   

2. Some headers have subtext and some don't. Subtexts don't look the same.
   
   

Recommendation: Remove subtext.

3. Some page content have max-width of 1400px and some are full width. For pages that are full width, it's odd that only the header has a max-width of 1400px.

Recommendation: Full width context should have full width header.

[BogdanUngureanu]

@taipeicoder Fair enough. I think we should focus on this PR on fixing the inconsistencies between P2, Domains, and Sites with the layout from Sites leading since this will reduce the size of the PR.

I think there's a more complex issue in plugins and themes pages. I've spent Friday a bit on a rabbit hole on the Themes page. Some issues I've found there:

• The scrollbar appears on the entire page instead of only the themes list section. This will affect the positioning on the header (e.g. if we try to replicate the max-width:1400px with margin: auto approach) - that's on top of unaesthetic of displaying a scrollbar on the entire page.
• The button action has a different style
• The full-width layout (as you mentioned)

The plugins page suffers the same problems.

My recommendation is to split this into 3-4 PRs:

• This one for p2/domain/sites
• One individually for Themes (where it would need to make corrections for the scrollbar and possibly on the theme list)
• One for Plugins (where we'll do the same as for themes)
• Schedule updates

This way we can work in parallel on all of them. 😄

I agree we should do it holistically, but I think this should be limited to the global view, but not for all views. 😄 This is because on site-specific pages we have a different type of layout - if we tackle it everywhere we'll probably blow up in scope, IMO.

@taipeicoder @fushar WDYT? :)

[taipeicoder]

Sounds good to me 🙂

[fushar]

With this change, nothing in the Domains page is aligned vertically 🤔 maybe we should also pull the search input to the left?

It also affects on smaller screen width, where now the search input is located to the left of the header:

[taipeicoder]

Alright, I've reduced the PR scope to just the domains page, and added improvements aligning the header with the search input field and the domain table. This is what I'm proposing:

Screen.Capture.on.2024-10-01.at.23-06-23.mp4

[taipeicoder]

@BogdanUngureanu @fushar this is ready for another review.

[BogdanUngureanu]

@taipeicoder Looks better! However, there's still a small inconsistency on a higher resolution.

Screen.Recording.2024-10-02.at.12.14.12.mov

[fushar]

@taipeicoder Looks better! However, there's still a small inconsistency on a higher resolution.

I can confirm this ☝️

[taipeicoder]

I'll have to go back to the drawing for this one. The main problem is that /sites has this negative margin for its container while the rest don't. This makes breakpoints and max-widths hard to work around because it will always have to take into account that negative margin.

The cleanest way is for the other pages to have this negative margin as well.

[taipeicoder]

I'll close this one since it's a bit stale and we're back to the drawing board.