Message: Mobile Enhancements and style changes

[tmcconechy]

Describe the bug
Design working on mobile enhancements came up with some changes.

Fixes
https://www.figma.com/file/WyznaRH0lS6rndjjGeSOen/Message?node-id=0%3A1

• Change modal-body-wrapper padding to 32px top and bottom, 16px left and right (all sizes)
• modal header should have padding top of 24px, bottom 0, and 16px left and right (all sizes)
• On the lowest breakpoint the message should have only 16px on each side (with a minWidth as before)
• Make these changes on the web component too

For the breaking points (no 2) looks like

• .modal-content -> margin t 16px
• .modal -> to 100%

Additional context
Please fix this in the web components too on a seperate PR.

[ericangeles]

Figma link doesn't work.

[tmcconechy]

Works for me.. i'll ping this to design...

[jbrcna]

Hello, using dimension 600 x 596 , the padding is till 4px, 16px
Expected result: modal-body-wrapper should be padding: 4px 24px

[tmcconechy]

The design doesnt 100% explain the padding above and below the text but its not 16px in the design so checking...On it

[tmcconechy]

Specs for this added to https://www.figma.com/file/WyznaRH0lS6rndjjGeSOen/Message?node-id=0%3A1 (32px there)
cc @ericangeles

[ericangeles]

@tmcconechy so the 16px will no longer apply on mobile? I remember we had discussions about the padding sizes. 24px will apply to all sizes?

[tmcconechy]

Its 16px left and right of the text and 32px above and below the text (we didnt spec the above and below until @jbrcna noticed an inconsistency). And this can go on both desktop and mobile (all sizes)

So we just need to fix the 32px above/below

[CindyMercadoReyes]

This issue is now resolved.