From 942aebedd0fdff47d592b182ab734e0bf4ba8aeb Mon Sep 17 00:00:00 2001
From: Yusef Ouda <YusefOuda@users.noreply.github.com>
Date: Sat, 13 Jul 2024 06:45:51 -0500
Subject: [PATCH] fixes alignment of notifications on mobile to be centered
(#3046)
---
packages/desktop-client/src/components/Notifications.tsx | 3 +++
upcoming-release-notes/3046.md | 6 ++++++
2 files changed, 9 insertions(+)
create mode 100644 upcoming-release-notes/3046.md
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index bb2a45be2..1ed01bdce 100644
--- 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
new file mode 100644
index 000000000..181ed9cd2
--- /dev/null
+++ b/upcoming-release-notes/3046.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [YusefOuda]
+---
+
+Fixes the alignment of notifications in mobile view
\ No newline at end of file
--
GitLab