From e9ede5213e7f197ca84e21c9c28f53e472118839 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Thu, 14 Aug 2025 10:23:47 +0800
Subject: [PATCH] fix(core): incorrect position of mobile notification card
 (#13485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 -->
---
 .../src/ui/notification/mobile/styles.css.ts          | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

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 cdc866cfe..0001f88b0 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 { 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({