MSD Account Notifications: Fix site card UI responsiveness

[taipeicoder]

Proposed Changes

This PR fixes the site card content overflowing on mobile resolution.

This PR also fixes the site URL being blueberry blue instead of gray.

Why are these changes being made?

Testing Instructions

• Head to (/v2)/me/notifications/sites
• Ensure that the site card is updated as described above

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:build-163582

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

Dashboard live (direct link)

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

[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 fix/notifications-sites-card-mobile-responsiveness on your sandbox.

[taipeicoder]

This approach isn't ideal since it makes assumptions on the parent container's padding. Another solution would be to make the card padding-less and allow its children to set the padding instead, but I'm not convinced that the complexity is worth it 🤔

[StevenDufresne]

Yeah, I think this is a pretty unique case.

[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.

[StevenDufresne]

Magic number?

[taipeicoder]

Yep, existing code. But it's for the placeholder, so not too worried about it if it minimizes layout shifts.

[StevenDufresne]

I see, so a.dataviews-url-field was applying the styles in this URL through this export.

Once the styles were moved into the dataviews, these stopped working (or identified how this wasn't working properly). 🤔

[taipeicoder]

Yes, but I've always thought of it as a hack so I don't mind losing this "convenience". We could create a more generic URL renderer component that not only styles the URL but also strips out the protocol, etc.

[StevenDufresne]

Tested. Works.

I agree, this relies on knowing what the card's padding is at all times and that's not ideal.

However, I can't think of another way to do that without rewriting the CollapsibleCard component as you mention.

The Card component now has Logical padding properties but that doesn't help. If we could pass in CSS values, we would be able to create a CSS variable to use for this case... but that's not possible.

We do set a default of 16px for the body on mobile.

Could we make that a variable we use across the dashboard?

app/styles.scss

--mobile-padding-inline-default: #{$grid-unit-20}

[taipeicoder]

The Card component now has Logical padding properties but that doesn't help. If we could pass in CSS values, we would be able to create a CSS variable to use for this case... but that's not possible.

That's true, the latest Card component supports padding none which would allow us to define the padding from the children, which should come from CollapsibleCard.

Could we make that a variable we use across the dashboard?

app/styles.scss

--mobile-padding-inline-default: #{$grid-unit-20}

I think avoiding defining our own styles as much as possible is still a good rule of thumb. I'd love to get access, for instance, the token definitions here https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/card/get-padding-by-size.ts to that they can be passed down to children as mentioned above.

---

Or maybe the simples solution is to just change the design so that the separator doesn't take the full width of the card 🙂

[taipeicoder]

Merging for now, appreciate the brainstorm @StevenDufresne!