fix(#3541) - adjust modal so left side of Checkbox is not cut off

[mxsoco]

Before (the change)

On focus, left side of the checkbox gets cut off by the modal container.

After (the change)

After adjusting the padding of the Modal and Scrollable container, the left side now displays on modal.

Steps needed to test

• Ensure that v1 styles for modal remains the same
• Confirm that checkbox left side does not get cut off by the side of the "scrollable" container.
• Check if checkbox left side still appears when modal has a scrollbar.

[chrisolsen]

Does it make sense that the vpadding is either 0 or ""?

[chrisolsen]

Is this override required? If things are version 2 then the --scrollable-padding should be overridden already.

[chrisolsen]

These padding values should just be moved into the padding above it.

[bdfranck]

Instead of modifying the component itself, I suggest that we update the Modal design tokens.

When we move the left/right padding out of --goa-modal-content-padding...

  "modal-content-padding": {
    "value": "{space.l} 0 {space.xl} 0",
    "type": "spacing",
    "description": "Content section padding"
  },

...and into --goa-modal-scrollable-padding-desktop...

  "modal-scrollable-padding-desktop": {
    "value": "{space.l}",
    "type": "spacing",
    "description": "Scrollable component horizontal padding for desktop"
  },

...and do the same for the mobile versions...

  "modal-content-padding-mobile": {
    "value": "{space.l} 0 {space.xl} 0",
    "type": "spacing",
    "description": "Content section padding for mobile (24px top, 16px sides, 32px bottom)"
  },

  "modal-scrollable-padding-mobile": {
    "value": "{space.m}",
    "type": "spacing",
    "description": "Scrollable component horizontal padding for mobile"
  },

...then we can achieve the same result without altering the component itself.

[bdfranck]

We need to keep --scrollable-padding here. It's being used for responsive padding.

[bdfranck]

What does this line do?

[bdfranck]

We should update the --goa-modal-content-padding-mobile design token's values instead of overriding it with a static value.

[bdfranck]

We should update --goa-modal-content-padding instead.