Skip to content

[Alert banner] Fixed width causes truncation on small devices #2715

Closed
@loredanaspataru

Description

@loredanaspataru

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

  1. Go to https://opensource.adobe.com/spectrum-css/alertbanner.html/
  2. Open dev tools and toggle device toolbar
  3. Choose a mobile device from the list of available options
  4. Observe that alert banner content gets truncated

Expected behavior

The alert banner should be fully visible even on small devices.

Screenshots

Screenshot 2024-04-30 at 13 56 54

Metadata

Metadata

Labels

bugResults from a bug in the CSS implementationjira ticket created

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions