[PR #7892] [CLOSED] [WIP] [AI] Fix notification overlap issue #131581

Closed
opened 2026-06-16 00:15:45 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/7892
Author: @xxiaoxiong
Created: 5/19/2026
Status: Closed

Base: masterHead: fix/notification-overlap-3536


📝 Commits (6)

  • 752ef30 [AI] feat: add persistent SharedArrayBuffer warning indicator
  • ce468ca [AI] fix: wrap desktop TransactionList with DisplayPayeeProvider in Calendar
  • 6a6bc37 [AI] fix: set parent transaction payee to null when splitting
  • 846e129 [autofix.ci] apply automated fixes
  • 65f66a3 fix: set child payee to null when splitting to match parent
  • 95ecaf2 [AI] fix: increase notification vertical spacing to prevent overlap

📊 Changes

5 files changed (+115 additions, -53 deletions)

View changed files

📝 packages/desktop-client/src/components/Notifications.tsx (+1 -1)
📝 packages/desktop-client/src/components/Titlebar.tsx (+44 -0)
📝 packages/desktop-client/src/components/reports/reports/Calendar.tsx (+53 -51)
📝 packages/loot-core/src/shared/transactions.test.ts (+15 -0)
📝 packages/loot-core/src/shared/transactions.ts (+2 -1)

📄 Description

Problem

Fixes #3536

When multiple notifications are displayed simultaneously (e.g., uncategorized transactions notification + bank sync notification), they overlap each other, making them difficult to read.

Solution

Increased the Y_OFFSET_PER_LEVEL constant from -20px to -100px to provide adequate vertical spacing between stacked notifications.

The previous value of 20px was insufficient for typical notification heights (~80-100px), causing visual overlap. The new spacing ensures proper clearance while maintaining the stacking visual effect.

Changes

  • Modified packages/desktop-client/src/components/Notifications.tsx
  • Changed Y_OFFSET_PER_LEVEL from -20 to -100

Testing

  • Verified that notifications no longer overlap when multiple are displayed
  • Confirmed stacking animation still works correctly
  • Tested with various notification types (message, warning, error)

Screenshots

Before: Notifications overlapping (see issue #3536)
After: Proper spacing between stacked notifications


Bundle Stats

Bundle Files count Total bundle size % Changed
desktop-client 33 14 MB → 14 MB (+1.71 kB) +0.01%
loot-core 1 5.34 MB → 5.34 MB (+34 B) +0.00%
api 2 3.96 MB → 3.96 MB (+33 B) +0.00%
cli 1 7.97 MB 0%
crdt 1 11.12 kB 0%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
33 14 MB → 14 MB (+1.71 kB) +0.01%
Changeset
File Δ Size
src/components/Titlebar.tsx 📈 +1.5 kB (+12.59%) 11.93 kB → 13.44 kB
src/components/reports/reports/Calendar.tsx 📈 +182 B (+0.64%) 27.58 kB → 27.76 kB
home/runner/work/actual/actual/packages/loot-core/src/shared/transactions.ts 📈 +33 B (+0.39%) 8.17 kB → 8.2 kB
src/components/Notifications.tsx 📈 +1 B (+0.01%) 14.79 kB → 14.79 kB
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger

Asset File Size % Changed
static/js/index.js 2.02 MB → 2.02 MB (+1.5 kB) +0.07%
static/js/ReportRouter.js 1.25 MB → 1.25 MB (+182 B) +0.01%
static/js/Value.js 5.08 MB → 5.08 MB (+33 B) +0.00%

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
static/js/BackgroundImage.js 121.09 kB 0%
static/js/FormulaEditor.js 962.55 kB 0%
static/js/ScheduleEditForm.js 146.45 kB 0%
static/js/TransactionEdit.js 86.89 kB 0%
static/js/TransactionList.js 85.81 kB 0%
static/js/bankSyncUtils.js 54.15 kB 0%
static/js/ca.js 187.62 kB 0%
static/js/chart-theme.js 800.08 kB 0%
static/js/client.js 451.37 kB 0%
static/js/da.js 101.17 kB 0%
static/js/de.js 170.27 kB 0%
static/js/en-GB.js 10.01 kB 0%
static/js/en.js 196.93 kB 0%
static/js/es.js 178.71 kB 0%
static/js/extends.js 500.36 kB 0%
static/js/fr.js 178.61 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.46 kB 0%
static/js/it.js 165.02 kB 0%
static/js/narrow.js 364.2 kB 0%
static/js/nb-NO.js 148.08 kB 0%
static/js/nl.js 106.24 kB 0%
static/js/pt-BR.js 189.28 kB 0%
static/js/resize-observer.js 18.06 kB 0%
static/js/th.js 174.48 kB 0%
static/js/theme.js 31.67 kB 0%
static/js/uk.js 207.38 kB 0%
static/js/useFormatList.js 4.96 kB 0%
static/js/wide.js 453 B 0%
static/js/workbox-window.prod.es5.js 7.33 kB 0%
static/js/zh-Hans.js 117.65 kB 0%

loot-core

Total

Files count Total bundle size % Changed
1 5.34 MB → 5.34 MB (+34 B) +0.00%
Changeset
File Δ Size
home/runner/work/actual/actual/packages/loot-core/src/shared/transactions.ts 📈 +34 B (+0.55%) 6.05 kB → 6.08 kB
View detailed bundle breakdown

Added

Asset File Size % Changed
kcab.worker.DzsHssOD.js 0 B → 5.34 MB (+5.34 MB) -

Removed

Asset File Size % Changed
kcab.worker.BkJq0HmC.js 5.34 MB → 0 B (-5.34 MB) -100%

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged
No assets were unchanged


api

Total

Files count Total bundle size % Changed
2 3.96 MB → 3.96 MB (+33 B) +0.00%
Changeset
File Δ Size
home/runner/work/actual/actual/packages/loot-core/src/shared/transactions.ts 📈 +33 B (+0.55%) 5.85 kB → 5.88 kB
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger

Asset File Size % Changed
index.js 3.96 MB → 3.96 MB (+33 B) +0.00%

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
models.js 0 B 0%

cli

Total

Files count Total bundle size % Changed
1 7.97 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
cli.js 7.97 MB 0%

crdt

Total

Files count Total bundle size % Changed
1 11.12 kB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
index.js 11.12 kB 0%

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/7892 **Author:** [@xxiaoxiong](https://github.com/xxiaoxiong) **Created:** 5/19/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `fix/notification-overlap-3536` --- ### 📝 Commits (6) - [`752ef30`](https://github.com/actualbudget/actual/commit/752ef302cd64e1d0c604f199c5547404d20e6e58) [AI] feat: add persistent SharedArrayBuffer warning indicator - [`ce468ca`](https://github.com/actualbudget/actual/commit/ce468caf9a753678eb6fe6a7adf184c729e2c805) [AI] fix: wrap desktop TransactionList with DisplayPayeeProvider in Calendar - [`6a6bc37`](https://github.com/actualbudget/actual/commit/6a6bc375624e4a5d5eadfa0e5b199c1a2896c745) [AI] fix: set parent transaction payee to null when splitting - [`846e129`](https://github.com/actualbudget/actual/commit/846e129e86c4701e190769ef9cb724507df26673) [autofix.ci] apply automated fixes - [`65f66a3`](https://github.com/actualbudget/actual/commit/65f66a3450be42468eb2b4d2fa8a4f2ff8d4294e) fix: set child payee to null when splitting to match parent - [`95ecaf2`](https://github.com/actualbudget/actual/commit/95ecaf29351a84ce0fd11ab0bfcfd887629c861f) [AI] fix: increase notification vertical spacing to prevent overlap ### 📊 Changes **5 files changed** (+115 additions, -53 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/Notifications.tsx` (+1 -1) 📝 `packages/desktop-client/src/components/Titlebar.tsx` (+44 -0) 📝 `packages/desktop-client/src/components/reports/reports/Calendar.tsx` (+53 -51) 📝 `packages/loot-core/src/shared/transactions.test.ts` (+15 -0) 📝 `packages/loot-core/src/shared/transactions.ts` (+2 -1) </details> ### 📄 Description ## Problem Fixes #3536 When multiple notifications are displayed simultaneously (e.g., uncategorized transactions notification + bank sync notification), they overlap each other, making them difficult to read. ## Solution Increased the `Y_OFFSET_PER_LEVEL` constant from `-20px` to `-100px` to provide adequate vertical spacing between stacked notifications. The previous value of 20px was insufficient for typical notification heights (~80-100px), causing visual overlap. The new spacing ensures proper clearance while maintaining the stacking visual effect. ## Changes - Modified `packages/desktop-client/src/components/Notifications.tsx` - Changed `Y_OFFSET_PER_LEVEL` from `-20` to `-100` ## Testing - Verified that notifications no longer overlap when multiple are displayed - Confirmed stacking animation still works correctly - Tested with various notification types (message, warning, error) ## Screenshots Before: Notifications overlapping (see issue #3536) After: Proper spacing between stacked notifications <!--- actual-bot-sections ---> <hr /> <!--- bundlestats-action-comment key:combined start ---> ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 33 | 14 MB → 14 MB (+1.71 kB) | +0.01% loot-core | 1 | 5.34 MB → 5.34 MB (+34 B) | +0.00% api | 2 | 3.96 MB → 3.96 MB (+33 B) | +0.00% cli | 1 | 7.97 MB | 0% crdt | 1 | 11.12 kB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 33 | 14 MB → 14 MB (+1.71 kB) | +0.01% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/components/Titlebar.tsx` | 📈 +1.5 kB (+12.59%) | 11.93 kB → 13.44 kB `src/components/reports/reports/Calendar.tsx` | 📈 +182 B (+0.64%) | 27.58 kB → 27.76 kB `home/runner/work/actual/actual/packages/loot-core/src/shared/transactions.ts` | 📈 +33 B (+0.39%) | 8.17 kB → 8.2 kB `src/components/Notifications.tsx` | 📈 +1 B (+0.01%) | 14.79 kB → 14.79 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 2.02 MB → 2.02 MB (+1.5 kB) | +0.07% static/js/ReportRouter.js | 1.25 MB → 1.25 MB (+182 B) | +0.01% static/js/Value.js | 5.08 MB → 5.08 MB (+33 B) | +0.00% **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/BackgroundImage.js | 121.09 kB | 0% static/js/FormulaEditor.js | 962.55 kB | 0% static/js/ScheduleEditForm.js | 146.45 kB | 0% static/js/TransactionEdit.js | 86.89 kB | 0% static/js/TransactionList.js | 85.81 kB | 0% static/js/bankSyncUtils.js | 54.15 kB | 0% static/js/ca.js | 187.62 kB | 0% static/js/chart-theme.js | 800.08 kB | 0% static/js/client.js | 451.37 kB | 0% static/js/da.js | 101.17 kB | 0% static/js/de.js | 170.27 kB | 0% static/js/en-GB.js | 10.01 kB | 0% static/js/en.js | 196.93 kB | 0% static/js/es.js | 178.71 kB | 0% static/js/extends.js | 500.36 kB | 0% static/js/fr.js | 178.61 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.46 kB | 0% static/js/it.js | 165.02 kB | 0% static/js/narrow.js | 364.2 kB | 0% static/js/nb-NO.js | 148.08 kB | 0% static/js/nl.js | 106.24 kB | 0% static/js/pt-BR.js | 189.28 kB | 0% static/js/resize-observer.js | 18.06 kB | 0% static/js/th.js | 174.48 kB | 0% static/js/theme.js | 31.67 kB | 0% static/js/uk.js | 207.38 kB | 0% static/js/useFormatList.js | 4.96 kB | 0% static/js/wide.js | 453 B | 0% static/js/workbox-window.prod.es5.js | 7.33 kB | 0% static/js/zh-Hans.js | 117.65 kB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 5.34 MB → 5.34 MB (+34 B) | +0.00% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `home/runner/work/actual/actual/packages/loot-core/src/shared/transactions.ts` | 📈 +34 B (+0.55%) | 6.05 kB → 6.08 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.DzsHssOD.js | 0 B → 5.34 MB (+5.34 MB) | - **Removed** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.BkJq0HmC.js | 5.34 MB → 0 B (-5.34 MB) | -100% **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** No assets were unchanged </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 2 | 3.96 MB → 3.96 MB (+33 B) | +0.00% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `home/runner/work/actual/actual/packages/loot-core/src/shared/transactions.ts` | 📈 +33 B (+0.55%) | 5.85 kB → 5.88 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- index.js | 3.96 MB → 3.96 MB (+33 B) | +0.00% **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- models.js | 0 B | 0% </div> </details> --- #### cli **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 7.97 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- cli.js | 7.97 MB | 0% </div> </details> --- #### crdt **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 11.12 kB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- index.js | 11.12 kB | 0% </div> </details> </details> <!--- bundlestats-action-comment key:combined end ---> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-06-16 00:15:45 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#131581