From 7e1d03e2cf146fe8b56fcb9f3a693bc2c9af4974 Mon Sep 17 00:00:00 2001
From: Shaobiao Lin <whalevocal@gmail.com>
Date: Fri, 15 Mar 2024 10:51:58 +0800
Subject: [PATCH] fix(toast): align to the center with actual element width
 (#847)

close #843

---------

Co-authored-by: LinkinStars <linkinstar@foxmail.com>
---
 ui/src/hooks/useToast/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/hooks/useToast/index.tsx b/ui/src/hooks/useToast/index.tsx
index 3541ff94..ae91a444 100644
--- a/ui/src/hooks/useToast/index.tsx
+++ b/ui/src/hooks/useToast/index.tsx
@@ -25,9 +25,9 @@ import ReactDOM from 'react-dom/client';
 const toastPortal = document.createElement('div');
 toastPortal.style.position = 'fixed';
 toastPortal.style.top = '90px';
-toastPortal.style.left = '0';
-toastPortal.style.right = '0';
-toastPortal.style.margin = 'auto';
+toastPortal.style.left = '50%';
+toastPortal.style.transform = 'translate(-50%, 0)';
+toastPortal.style.maxWidth = '100%';
 toastPortal.style.zIndex = '1001';
 
 const setPortalPosition = () => {