fix(Modal): add proper right padding to header

[jsehull]

Closes #13288

Ensure Heading has proper padding alignment to match design specs shown here

Currently, only the paragraph text has the 20% right padding layout

Changelog

New

• add 20% padding-right for the Header text to match the p text

Changed

• n/a

Removed

• n/a

Testing / Reviewing

1. Open Storybook > Modal > Default (or any version)
2. Inspect the h3 Header and confirm there is now right padding
   
3. Also note that the padding values match the p tag below since they maintain an equal cutoff point (only IF there is a description area on that modal variation)

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2cc726a
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6426f3ba5f92b80008c98866
😎 Deploy Preview	https://deploy-preview-13409--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	2cc726a
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6426f3ba72c4c90008449628
😎 Deploy Preview	https://deploy-preview-13409--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[francinelucca]

Looks like the header is more padded than the content here

Should the padding-right be reduced by 3rem since the modal header is padded-right by 3rem?

I also think the content is over-padded by 1rem. Since it is right-padded 1rem but then the p tag is reducing 2rem from the 20%

[jsehull]

@francinelucca Good eye, it does need to account for that right side padding.

Your question had me dig for how the padding-right percentages work currently. Here's what I found when testing a consistent length:

---

Calculation info
type: (total padding-right)/full div length = right padding % | calculation used
**i.e. padding-right sum of both the item (h3) and outer div
__

h3
current: (99.2 + 3rem)/720 = 20.44% | 20% - 2rem (current as of this PR)
perfect: (96 + 3rem)/720 = 20% | 20% - 2.2rem

p
current: (105.7 + 1rem)/720 = 16.88% | 20% - 2rem
perfect: (128 + 1rem)/720 = 20% | 20% - 0.6rem

The header was close, but the p text area was further off, which is probably why you caught it so fast.

---

Shall I update them both to use the "perfect 20%" or use a simpler rem calculation? (i.e. p: 20% - 1rem = 19.1%, h3: 20% - 2rem = 20.44%) I didn't know if that makes it easier to understand/maintain.

[francinelucca]

Thanks for that detailed explanation @jsehull. let's just deduct an extra rem in the header and that should be good enough.