fixes alignment of notifications on mobile to be centered (actualbudg…

…et#3046)
reecerunnells · Jul 13, 2024 · 942aebe · 942aebe
1 parent 32d8304
commit 942aebe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -13,6 +13,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { useActions } from '../hooks/useActions';
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
+import { useResponsive } from '../ResponsiveProvider';
 import { styles, theme, type CSSProperties } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button';
@@ -245,6 +246,7 @@ function Notification({
 
 export function Notifications({ style }: { style?: CSSProperties }) {
   const { removeNotification } = useActions();
+  const { isNarrowWidth } = useResponsive();
   const notifications = useSelector(
     (state: State) => state.notifications.notifications,
   );
@@ -254,6 +256,7 @@ export function Notifications({ style }: { style?: CSSProperties }) {
         position: 'fixed',
         bottom: 20,
         right: 13,
+        left: isNarrowWidth ? 13 : undefined,
         zIndex: 10000,
         ...style,
       }}

diff --git a/upcoming-release-notes/3046.md b/upcoming-release-notes/3046.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [YusefOuda]
+---
+
+Fixes the alignment of notifications in mobile view