fix(component): toast shouldn't cover whole header (#9032)

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"
   },

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={{

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,

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: