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,