🐛 What's broken?
Toast notifications with long messages or fixed widths extend beyond the viewport on smaller screens. This causes part of the notification to become hidden, making it difficult for users to read or dismiss.
📋 Steps to Reproduce
- Link EaseMotion CSS using the CDN:
https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css
- Create a toast notification with a long message.
- Open the page on a mobile device or reduce the browser width.
- Notice that the toast extends outside the viewport.
✅ Expected Behavior
The toast notification should remain fully visible within the viewport, wrapping its content and adjusting its width appropriately on smaller screens.
❌ Actual Behavior
The toast overflows horizontally, causing text and action elements to be partially hidden on mobile devices.
🔗 Reproduction
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css" />
</head>
<body>
<div class="toast">
This is a very long toast notification message that demonstrates how the component can overflow beyond the screen width on smaller devices instead of wrapping properly.
</div>
</body>
</html>
🌍 Environment
| Field |
Value |
| EaseMotion CSS version |
Latest CDN |
| Browser |
Chrome 138 |
| OS |
Windows 11 |
📸 Screenshot (optional)
On mobile screens, the toast notification extends beyond the viewport, making part of the message inaccessible.
Possible Fix: Apply a responsive width (such as max-width: 100% or calc(100% - 2rem)) along with overflow-wrap: break-word; so the toast remains fully visible and readable on all screen sizes.
🐛 What's broken?
Toast notifications with long messages or fixed widths extend beyond the viewport on smaller screens. This causes part of the notification to become hidden, making it difficult for users to read or dismiss.
📋 Steps to Reproduce
https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css✅ Expected Behavior
The toast notification should remain fully visible within the viewport, wrapping its content and adjusting its width appropriately on smaller screens.
❌ Actual Behavior
The toast overflows horizontally, causing text and action elements to be partially hidden on mobile devices.
🔗 Reproduction
🌍 Environment
📸 Screenshot (optional)
On mobile screens, the toast notification extends beyond the viewport, making part of the message inaccessible.