fix(core): incorrect position of mobile notification card (#13485)

#### PR Dependency Tree


* **PR #13485** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Improved mobile toast notification layout for better responsiveness
across screen sizes.
* Replaced fixed left alignment with dynamic edge offsets, ensuring
consistent spacing near screen edges.
* Removed forced centering and rigid width constraints to reduce
clipping and overlap on narrow viewports.
  * Visual behavior only; no changes to interaction or functionality.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/src/ui/notification/mobile/styles.css.ts

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { globalStyle, keyframes, style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 
 import {
   cardBorderColor,
@@ -17,11 +17,10 @@ const expandIn = keyframes({
   },
 });
 export const sonner = style({
-  left: '0 !important',
-});
-globalStyle(`${sonner} li[data-sonner-toast]`, {
-  width: 'fit-content !important',
-  margin: '0px auto',
+  vars: {
+    '--mobile-offset-left': '0px !important',
+    '--mobile-offset-right': '0px !important',
+  },
 });
 
 export const toastRoot = style({