[CalloutCard] Fix heading overflow when dismissible

[mateus]

WHY are these changes introduced?

Fixes heading overflow issue when the CalloutCard is dismissible.

WHAT is this pull request doing?

Fixes the issue by adding padding to the right on the CalloutCard container when it is dismissible. The spacing was inspired by the dismissible Banner.

Mobile

Tablet/Desktop

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page, CalloutCard} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <CalloutCard
        title="Customize the style of your checkout"
        illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
        primaryAction={{content: 'Customize checkout'}}
        onDismiss={() => {}}
      >
        <p>Upload your store’s logo, change colors and fonts, and more.</p>
      </CalloutCard>
      );
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 3 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/CalloutCard/CalloutCard.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/CalloutCard/CalloutCard.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/CalloutCard/CalloutCard.tsx

🧩 src/components/CalloutCard/CalloutCard.tsx (total: 0)

Files potentially affected (total: 0)

[Tom-Bonnike]

Makes sense to me!

[kyledurand]

🙌 Thanks @mateus