Set Card content max-width

[danielguillan]

Summary

Sets a maximum width for the heading and description of the Card component to prevent very long lines on wider cards.

Supporting resources (related issues, external links, etc):

• Related issue: https://github.com/github/marketing-engineering/issues/4193#issuecomment-2707285560

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: bdb51e0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[rezrah]

@danielguillan it looks like the overall width of the card has been affected here somehow? Can't immediately see how that would happen though, any ideas? I wouldn't expect this diff here.

[danielguillan]

@rezrah Good catch! With this update, the card's maximum total width is now limited to 400px (based on the descriptions' max-width) instead of the 420px max-width set at the container level.

To avoid regressions, we could match the description's max-width to the cards' current max-width (i.e., 420px). Wdyt? We could set 400px on the full-width variant only, but I don't believe it's worth it.

[rezrah]

That sounds like a good plan 👍. Yeah let's do that please. If we can limit scope of these changes to inner content only like the PR indicates, that would help reduce the testing burden and risks of regressions outside of the card.

[rezrah]

LGTM

One question for you @danielguillan, which looks like it could either be a regression or flakey test? Hopefully latter, as otherwise this could cause significant downstream regression too 🤔

[danielguillan]

@rezrah I limited these changes to the full-width variant to avoid any potential regressions in card instances with an intrinsic size. The default variant, which has a maximum width at the container level, already constrains the content length.

[rezrah]

🚀