From 6d13716e97feaf6b093f3222c105183497bc13ac Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Sat, 25 Mar 2023 01:22:10 +0800
Subject: [PATCH] fix: center toast in main content (#1683)

---
 apps/web/src/layouts/index.tsx           |  2 +-
 packages/component/src/ui/toast/toast.ts | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx
index 499b7f8fe7..efce1cb693 100644
--- a/apps/web/src/layouts/index.tsx
+++ b/apps/web/src/layouts/index.tsx
@@ -201,7 +201,7 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
           currentPath={router.asPath}
           paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
         />
-        <StyledWrapper>
+        <StyledWrapper className="main-container">
           <AffineWorkspaceEffect />
           {children}
           <StyledToolWrapper>
diff --git a/packages/component/src/ui/toast/toast.ts b/packages/component/src/ui/toast/toast.ts
index 69f76263e8..e3f7d4ad58 100644
--- a/packages/component/src/ui/toast/toast.ts
+++ b/packages/component/src/ui/toast/toast.ts
@@ -24,9 +24,9 @@ const htmlToElement = <T extends ChildNode>(html: string | TemplateResult) => {
   return template.content.firstChild as T;
 };
 
-const createToastContainer = () => {
+const createToastContainer = (portalQuery?: string) => {
   const styles = css`
-    position: fixed;
+    position: absolute;
     z-index: 9999;
     top: 16px;
     left: 16px;
@@ -39,12 +39,14 @@ const createToastContainer = () => {
   `;
   const template = html`<div style="${styles}"></div>`;
   const element = htmlToElement<HTMLDivElement>(template);
-  document.body.appendChild(element);
+  const portal = portalQuery && document.querySelector(portalQuery);
+  (portal || document.body).appendChild(element);
   return element;
 };
 
 export type ToastOptions = {
   duration: number;
+  portalQuery?: string;
 };
 
 /**
@@ -55,10 +57,12 @@ export type ToastOptions = {
  */
 export const toast = (
   message: string,
-  { duration }: ToastOptions = { duration: 2500 }
+  { duration, portalQuery = '.main-container' }: ToastOptions = {
+    duration: 2500,
+  }
 ) => {
   if (!ToastContainer) {
-    ToastContainer = createToastContainer();
+    ToastContainer = createToastContainer(portalQuery);
   }
 
   const styles = css`