[Alert banner] Fixed width causes truncation on small devices
loredanaspataru opened this issue · comments
Description
The alert banner has a fixed width of 832px (M)/ 680px (L). This is set by --spectrum-alert-banner-width variable in spectrum-css tokens. This introduces an issue for small screens because the alert banner gets truncated on mobile devices.
Since the fixed sizes were introduced to prevent having alert banners that are too wide and hard to read, we should use the fixed sizes as max-width instead of width. This way the alert banner would occupy all the available space until it reaches its maximum allowed width of 832px/680px, depending on the theme size.
Steps to reproduce
- Go to https://opensource.adobe.com/spectrum-css/alertbanner.html/
- Open dev tools and toggle device toolbar
- Choose a mobile device from the list of available options
- Observe that alert banner content gets truncated
Expected behavior
The alert banner should be fully visible even on small devices.
Screenshots
Tracking this in Jira via CSS-748