MSD: Use the description for the subtitle on the overview.

[StevenDufresne]

Part of DOTMSD-746.

Proposed Changes

Header	Header

Why are these changes being made?

This brings it in alignment with the other pages.

Known issues

Currently, the tabbing order is a bit weird, seeing that you tab through the description first because of how the components are structured in PageHeader. This is the same for all pages.

I'm not sure if this should change or not in a follow-up PR.

Testing Instructions

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 tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• 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:commit-a22854c4710ccce500bf69d700c14acfff20edd6

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[fushar]

Hmm I'm not sure I understand the problem but isn't the current behavior already correct as per the linked P2?

[lucasmendes-design]

We have a definition :) it's just missing the alignment of the three dots. cc: @StevenDufresne

[lucasmendes-design]

Also, let's reduce the font size.

I believe the current version has Font-size: 40px. Let's use font-size: 24px.

[lucasmendes-design]

We only use font-size 40px on desktop. The rest should be 24px ✌🏽

[StevenDufresne]

We only use font-size 40px on desktop. The rest should be 24px

The Hosting designs and the Automattic component library (dhW7zYBamXJIeJIE3wy5f4-fi) are technically out of sync. The <PageHeader /> heading component should be 32px and not 40px. I'm fine to deviate, but wanted to call that out.

[StevenDufresne]

This layout is the direction we're going. See: p1762219198843479-slack-multi-site-dashboard.

@fushar @lucasmendes-design I would prefer to merge this change fixing the order, and address the rest in a follow-up PR more holistically.

[fushar]

Sure. Makes sense 👍

[fushar]

@StevenDufresne I think this PR caused a regression. The layout issue that was fixed by #106005 came back. Could we check 🤔

[StevenDufresne]

@fushar I see the issue. Thanks for bringing that up.

Based on how we're using PageHeader, I don't know that we need to restrict the description length in the <PageHeader>. Maybe we can leave that up to the consumer.

I'll open a PR to discuss.

[StevenDufresne]

Alright, opened one here: #106980