Modal heading text overlap with close button in mobile view

[vkyt]

Description

Description of the defect

The modal component heading could overlap with the close button in certain scenario - refer to the attached image.

Reproduction Steps

Use the TDS sample code as an example:

  const [showModal, setShowModal] = React.useState(false)
  const focusElementOnClose = React.useRef(null)

  const openModal = () => {
    setShowModal(true)
  }

  const closeModal = () => {
    setShowModal(false)
  }

  const proceed = () => {
    alert('modal proceed')
    setShowModal(false)
  }

  return (
    <div>
      <Modal
        heading="Make a statement for a content modal What if we got a much longer title"
        bodyText="Use a content modal for dismissible content. A content modal provides a way for the user to access additional information without leaving the current page or view, and maintain context"
        confirmCTAText="Primary action"
        focusElementAfterClose={focusElementOnClose}
        onConfirm={proceed}
        onClose={closeModal}
        isOpen={showModal}
      />
      <Box inset={4} between={3}>
        <Heading level="h2">Content Modal</Heading>
        <div>
          <Button ref={focusElementOnClose} onClick={openModal}>
            Open Modal
          </Button>
        </div>
      </Box>
    </div>
  )
}
;<ExampleContentModal />

Generate the modal in responsive view.

Recommendation

Increase top padding?

Meta

• TDS version (npm or DSM): "@tds/community-modal": "^1.1.1"
• Willing to develop solution: No
• Has workaround: No
• High impact: No

Screenshots