AlaskaAirlines / auro-drawer

Custom element that displays additional information over page content
https://auro.alaskaair.com/components/auro/drawer
Apache License 2.0
0 stars 0 forks source link

auro-drawer: Allow for usage of 100% of screen width at mobile breakpoints #16

Open erikalanghauser opened 6 months ago

erikalanghauser commented 6 months ago

Is your feature request related to a problem? Please describe.

When designing for mobile, we would like the ability for the drawer to open up across 100% of the screen width. At 320px width we are seeing some left to right scrolling in the Preview seats drawer, because not all aircraft designs will fit in the drawer at the max width today (which looks like ~90% of screen width?)

Since the mobile app will now be consuming the responsive web microsite experience, there are more eyes on this and less tolerance for left to right scrolling in this drawer.

This is also a feature that will be beneficial in other mobile instances down the road.

Describe the solution you'd like

The ability to set the max width of auro-drawer to take up 100% of the device width (at mobile breakpoints).

Describe alternatives you've considered

Considered using auro-dialog instead but that also doesn't utilize the full screen real estate (vertically).

Additional context

Current example from the app consuming responsive web: image

CC: @leeejune @arrenleung @ftaylor-alaska @bridgetglewis

Patrick-Daly-AA commented 6 months ago

We will need a blueprint update for this change.

This seems like a very reasonable feature include, and we will look into implementing after there's a blueprint update.