🔧 Ensure there's room for the modal close X

[tesk9]

Context

Fixes A11-4004
Fixes A11-4012

The modal's close x currently sometimes partially obscures the modal's title on mobile.

This PR adjusts the modal title's padding on mobile when the x is present so that there's no overlap between the x and the title.

🖼️ What does this change look like?

Before	After

---

Here is the padding highlighted:

Component completion checklist

• I've gone through the relevant sections of the Development Accessibility guide with the changes I made to this component in mind
• Changes are clearly documented
  • Component docs include a changelog
  • Any new exposed functions or properties have docs
• Changes extend to the Component Catalog
  • The Component Catalog is updated to use the newest version, if appropriate
  • The Component Catalog example version number is updated, if appropriate
  • Any new customizations are available from the Component Catalog
  • The component example still has:
    • an accurate preview
    • valid sample code
    • correct keyboard behavior
    • correct and comprehensive guidance around how to use the component
• Changes to the component are tested/the new version of the component is tested
• Component API follows standard patterns in noredink-ui
  • e.g., as a dev, I can conveniently add an nriDescription
  • and adding a new feature to the component will not require major API changes to the component
• If this is a new major version of the component, our team has stories created to upgrade all instances of the old component. Here are links to the stories:
  • add your story links here OR just write this is not a new major version
• Please assign the following reviewers:
  • Someone from your team who can review your PR in full and review requirements from your team's perspective.
  • team-accessibilibats-a11ybats - Someone from this group will review your PR for accessibility and adherence to component library foundations.
  • If there are user-facing changes, a designer. (You may want to direct your designer to the deploy preview for easy review):
    • For writing-related component changes, add Stacey (staceyadams)
    • For quiz engine-related components, add Ravi (ravi-morbia)
    • For a11y-related changes to general components, add Ben (bendansby)
    • For general component-related changes or if you’re not sure about something, add the Design group (NoRedInk/design)

[linear]

A11-4004 [A11yAud-0537] Modals - Reflow overlap of title with close button

A11-4012 [A11yAud-0408] Writing portfolio student writing modal is not responsive

[charbelrami]

Looks good!