From 53339e33702903b6158abbd4ecdcfe8d3df6d550 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Fri, 6 Dec 2024 01:56:01 +0000
Subject: [PATCH] fix(component): toast shouldn't cover whole header (#9032)

---
 packages/frontend/component/package.json               |  2 +-
 .../src/ui/notification/mobile/notification-center.tsx |  3 +++
 .../component/src/ui/notification/mobile/styles.css.ts | 10 +++++++++-
 yarn.lock                                              |  4 ++--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index cb2327a0db..921753f2f0 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -58,7 +58,7 @@
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.22.3",
     "react-transition-state": "^2.1.1",
-    "sonner": "^1.4.41",
+    "sonner": "^1.7.0",
     "swr": "^2.2.5",
     "zod": "^3.22.4"
   },
diff --git a/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx b/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
index bf8a583e71..ce3e619be2 100644
--- a/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
+++ b/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
@@ -1,8 +1,11 @@
 import { Toaster } from 'sonner';
 
+import { sonner } from './styles.css';
+
 export function MobileNotificationCenter() {
   return (
     <Toaster
+      className={sonner}
       visibleToasts={1}
       position="top-center"
       style={{
diff --git a/packages/frontend/component/src/ui/notification/mobile/styles.css.ts b/packages/frontend/component/src/ui/notification/mobile/styles.css.ts
index 5f065d5f34..0242690ead 100644
--- a/packages/frontend/component/src/ui/notification/mobile/styles.css.ts
+++ b/packages/frontend/component/src/ui/notification/mobile/styles.css.ts
@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { keyframes, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 
 import {
   cardBorderColor,
@@ -16,6 +16,14 @@ const expandIn = keyframes({
     maxWidth: '100vw',
   },
 });
+export const sonner = style({
+  left: '0 !important',
+});
+globalStyle(`${sonner} li[data-sonner-toast]`, {
+  width: 'fit-content !important',
+  margin: '0px auto',
+});
+
 export const toastRoot = style({
   width: 'fit-content',
   height: 44,
diff --git a/yarn.lock b/yarn.lock
index 812d629605..4d06676268 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -364,7 +364,7 @@ __metadata:
     react-paginate: "npm:^8.2.0"
     react-router-dom: "npm:^6.22.3"
     react-transition-state: "npm:^2.1.1"
-    sonner: "npm:^1.4.41"
+    sonner: "npm:^1.7.0"
     storybook: "npm:^8.2.9"
     swr: "npm:^2.2.5"
     typescript: "npm:^5.6.3"
@@ -30180,7 +30180,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sonner@npm:^1.4.41, sonner@npm:^1.5.0":
+"sonner@npm:^1.5.0, sonner@npm:^1.7.0":
   version: 1.7.0
   resolution: "sonner@npm:1.7.0"
   peerDependencies: