From 3e32b930e3ded1a1889cde0797f8dda62e64610b Mon Sep 17 00:00:00 2001
From: thefirex <porfirioafonso.f@hotmail.com>
Date: Sat, 5 Oct 2024 13:55:04 +0100
Subject: [PATCH] Fixes bank sync notification overlap with uncategorized
 transactions

---
 .../src/components/BankSyncStatus.tsx             | 15 ++++++---------
 .../desktop-client/src/components/FinancesApp.tsx |  2 --
 .../desktop-client/src/components/Titlebar.tsx    |  2 ++
 upcoming-release-notes/3577.md                    |  6 ++++++
 4 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 upcoming-release-notes/3577.md

diff --git a/packages/desktop-client/src/components/BankSyncStatus.tsx b/packages/desktop-client/src/components/BankSyncStatus.tsx
index 52130e0c198..7ab31a9d287 100644
--- a/packages/desktop-client/src/components/BankSyncStatus.tsx
+++ b/packages/desktop-client/src/components/BankSyncStatus.tsx
@@ -21,9 +21,9 @@ export function BankSyncStatus() {
   const transitions = useTransition(
     accountsSyncingCount > 0 ? 'syncing' : null,
     {
-      from: { opacity: 0, transform: 'translateY(-100px)' },
-      enter: { opacity: 1, transform: 'translateY(0)' },
-      leave: { opacity: 0, transform: 'translateY(-100px)' },
+      from: { opacity: 0 },
+      enter: { opacity: 1 },
+      leave: { opacity: 0 },
       unique: true,
     },
   );
@@ -31,13 +31,10 @@ export function BankSyncStatus() {
   return (
     <View
       style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        marginTop: 5,
-        alignItems: 'center',
         zIndex: 501,
+        flexDirection: 'row',
+        overflow: 'hidden',
+        textWrap: 'nowrap',
       }}
     >
       {transitions(
diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
index b585d5d30ee..e5cc924f4cd 100644
--- a/packages/desktop-client/src/components/FinancesApp.tsx
+++ b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -22,7 +22,6 @@ import { useResponsive } from '../ResponsiveProvider';
 import { theme } from '../style';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
 
-import { BankSyncStatus } from './BankSyncStatus';
 import { View } from './common/View';
 import { GlobalKeys } from './GlobalKeys';
 import { ManageRulesPage } from './ManageRulesPage';
@@ -174,7 +173,6 @@ export function FinancesApp() {
               }}
             />
             <Notifications />
-            <BankSyncStatus />
 
             <Routes>
               <Route
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index 7ef7ad41d8d..82180c8c815 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -26,6 +26,7 @@ import { theme, type CSSProperties, styles } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';
 import { AnimatedRefresh } from './AnimatedRefresh';
+import { BankSyncStatus } from './BankSyncStatus';
 import { MonthCountSelector } from './budget/MonthCountSelector';
 import { Button } from './common/Button2';
 import { Link } from './common/Link';
@@ -332,6 +333,7 @@ export function Titlebar({ style }: TitlebarProps) {
         <Route path="*" element={null} />
       </Routes>
       <View style={{ flex: 1 }} />
+      <BankSyncStatus />
       <UncategorizedButton />
       {isDevelopmentEnvironment() && !Platform.isPlaywright && (
         <ThemeSelector style={{ marginLeft: 10 }} />
diff --git a/upcoming-release-notes/3577.md b/upcoming-release-notes/3577.md
new file mode 100644
index 00000000000..f0f6c4feed7
--- /dev/null
+++ b/upcoming-release-notes/3577.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [The-Firexx]
+---
+
+Fixes bank sync notification overlap with uncategorized transactions
\ No newline at end of file