[PR #6551] [fix] improves UX of notifications for mobile devices #6595

Closed
opened 2026-02-28 21:30:28 -06:00 by GiteaMirror · 0 comments
Owner

Original Pull Request: https://github.com/actualbudget/actual/pull/6551

State: closed
Merged: Yes


resolves #6539

Summary

Transformed the notification system from vertical stacking to z-axis layered stacking for a more modern, space-efficient design.

Key Changes

Visual Design:

  • Notifications now stack on the z-axis with a "card deck" effect
  • Only top 3 notifications visible (newest at front, older ones scale behind)
  • Progressive scaling (5% per level), and vertical offset (-20px) for depth (opacity option provided but not used for now)
  • Added 8px border radius for softer appearance
  • Smooth animations when notifications are dismissed and transition forward

Layout Improvements:

  • Repositioned close button to persistent top-right corner
  • Action button now appears on the same row as message text (right-aligned)
  • Better use of horizontal space

Interactivity:

  • Only the front notification is interactive (swipe-to-dismiss)
  • Background notifications have reduced pointer events
  • Maintains existing swipe gesture functionality

Configuration:
All stacking parameters exposed as constants for easy customization:

  • MAX_VISIBLE_NOTIFICATIONS - number of stacked notifications (default: 3)
  • SCALE_MULTIPLIER - scale reduction per level (default: 0.05)
  • OPACITY_MULTIPLIER - opacity reduction per level (default: 0.2)
  • MIN_OPACITY - minimum opacity for stacked notifications (default: 1.0)
  • Y_OFFSET_PER_LEVEL - vertical peek offset (default: -20px)
  • BASE_Z_INDEX - base z-index for stacking (default: 10)
Screenshot 2026-01-05 at 12 15 05 pm
**Original Pull Request:** https://github.com/actualbudget/actual/pull/6551 **State:** closed **Merged:** Yes --- resolves #6539 ### Summary Transformed the notification system from vertical stacking to z-axis layered stacking for a more modern, space-efficient design. ### Key Changes **Visual Design:** - Notifications now stack on the z-axis with a "card deck" effect - Only top 3 notifications visible (newest at front, older ones scale behind) - Progressive scaling (5% per level), and vertical offset (-20px) for depth (opacity option provided but not used for now) - Added 8px border radius for softer appearance - Smooth animations when notifications are dismissed and transition forward **Layout Improvements:** - Repositioned close button to persistent top-right corner - Action button now appears on the same row as message text (right-aligned) - Better use of horizontal space **Interactivity:** - Only the front notification is interactive (swipe-to-dismiss) - Background notifications have reduced pointer events - Maintains existing swipe gesture functionality **Configuration:** All stacking parameters exposed as constants for easy customization: - `MAX_VISIBLE_NOTIFICATIONS` - number of stacked notifications (default: 3) - `SCALE_MULTIPLIER` - scale reduction per level (default: 0.05) - `OPACITY_MULTIPLIER` - opacity reduction per level (default: 0.2) - `MIN_OPACITY` - minimum opacity for stacked notifications (default: 1.0) - `Y_OFFSET_PER_LEVEL` - vertical peek offset (default: -20px) - `BASE_Z_INDEX` - base z-index for stacking (default: 10) <img width="331" height="470" alt="Screenshot 2026-01-05 at 12 15 05 pm" src="https://github.com/user-attachments/assets/086e5dfe-2e53-4793-bfa1-a99926a463a3" />
GiteaMirror added the pull-request label 2026-02-28 21:30:28 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#6595