[modal] inputs/components should be able to span full width

[aagonzales]

Currently the modal has a padding-right of 25%. However, this padding-right should only apply to text in a modal and not restrict other components like form inputs and tables. Those should be able to span the full width of the modal container.

As-is:

To-be:

[asudoh]

Hi @aagonzales does “trap focus” story address this issue? react.carbondesignsystem.com may be stale, but I think local clone shows the full width input when we shrink the browser's width. Thanks!

[aagonzales]

@asudoh I'm not sure, I can't tell from just the code, I'd have to see it.

[asudoh]

@aagonzales Does https://deploy-preview-4657--carbon-components-react.netlify.com/?path=/story/modal--trap-focus work? You'll see full width text box when you shrink the browser window. Please let me know if you have any questions - Thanks!

[jz2cao]

@asudoh
I think @aagonzales was requesting if it is possible for carbon to allow user to utilize the full width of the modal for customized design elements (e.g. it makes sense to have the padding if we simply showing the header and content in the modal, we would also want to flexibility to use the full width if we want to put something like a form into the modal)

thanks

[aagonzales]

(oops sorry for the very delayed response)
If bx--modal-content is just text should have the 20% padding right but the bx--modal-content bx--modal-content--with-form should have padding-right: 16px, so span the full width of the modal.

In the react storybook it was actually just the "default" size that wasn't doing this. The large one was also spanning the full width of the modal.

[asudoh]

Thank you for clarifying @aagonzales @jz2cao! Created #5046.