Wider Notification Panel: More Room for Actions and Context
Wider Notification Panel: More Room for Actions and Context
Released in v0.1.345
Overview
The notification slide-over panel has been widened from 384 px (max-w-sm) to 448 px (max-w-md) on desktop. This small but meaningful layout change reduces truncation and cramped rendering across all the interactive elements the panel contains.
Background
The notification panel is one of the most action-dense surfaces in the product. A single notification can contain:
- A title and multi-line body text
- One or more action pill buttons (e.g. Open thread, Protect deposit, Snooze 24h)
- An inline grouping header with a per-group dismiss control
- An urgency flag chip (whose label is already conditionally hidden on small screens with
hidden sm:inline)
At the previous 384 px cap, these elements regularly competed for horizontal space — pill button labels were clipped, body text wrapped onto extra lines, and the header/dismiss row felt squeezed.
What changed
A single Tailwind class change in src/components/notification-slide-over.tsx:
- max-w-sm
+ max-w-md
The panel already uses w-full to fill the screen on mobile, so this change only affects viewports wide enough to respect the max-width constraint. There is no behaviour or data change.
Result
- Action pill buttons now display their full labels without truncation.
- Notification body text has 64 px more room per line, reducing unnecessary wrapping.
- Group headers and dismiss controls sit side-by-side without crowding.
- The panel now matches the width of the Getting Started panel (
sm:max-w-md), creating a consistent slide-over experience across the app.
Affected component
| Component | Path |
|---|---|
| Notification slide-over | src/components/notification-slide-over.tsx |
No action required
This change is automatic — no configuration, feature flags, or user settings are involved.