Site Profiler UI polishing

[candy02058912]

Related to https://github.com/Automattic/dotcom-forge/issues/9269

Proposed Changes

pdtkmj-2Z1-p2#comment-5721 and pdtkmj-2Z1-p2#comment-5723

Before	After

pdtkmj-2Z1-p2#comment-5724

Before	After

pdtkmj-2Z1-p2#comment-5725

Before	After

Why are these changes being made?

• Polishing the design

Testing Instructions

• Go to calypso.localhost:3000/sites/performance/:site and calypso.localhost:3000/speed-test-tool?url=<site>
• Check UI on various screen sizes

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-120780

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[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/site-profiler-styles on your sandbox.

[matt-west]

Thanks for tackling this @candy02058912! The loader and dropdown now look great. 👍

We now have too much top margin on the AI banner on desktop. We’ll only need that margin once the boxes stack at smaller screen sizes.

This isn’t mentioned on the original issues, but can we extend the Did you know? box to fill the full-width of the screen once the boxes stack. At the moment it looks a bit odd.

We’ll need to add a max-width on the content to avoid ending up with really long lines of text at larger screen widths.

Current

Desired

[matt-west]

Pending changes to the AI banner spacing.

[vykes-mac]

LGTM

[matt-west]

@vykes-mac The Did you know? banner is now broken on mobile.

The max-width set on the text also doesn't match the design. It should be 430px.

Please test changes thoroughly on both desktop and mobile before merging PRs. cc @autumnfjeld

[vykes-mac]

@candy02058912 Could you take a look at fixing this?