From 77d13a4f8e2517ac085e0ac0491dd2616d7e3492 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Fri, 27 Sep 2024 10:32:36 +0800
Subject: [PATCH] change toaster height

---
 frontend/src/components/toast/toast.js    | 16 +++++++---------
 frontend/src/components/toast/toaster.css |  3 ++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/toast/toast.js b/frontend/src/components/toast/toast.js
index 770ccb2f15d..2475cbf15ab 100644
--- a/frontend/src/components/toast/toast.js
+++ b/frontend/src/components/toast/toast.js
@@ -56,9 +56,10 @@ export default class Toast extends React.PureComponent {
 
   state = {
     isShown: true,
-    height: 0
   };
 
+  containerRef = React.createRef();
+
   componentDidUpdate(prevProps) {
     if (prevProps.isShown !== this.props.isShown) {
       // eslint-disable-next-line react/no-did-update-set-state
@@ -116,12 +117,10 @@ export default class Toast extends React.PureComponent {
 
   onRef = ref => {
     if (ref === null) return;
-
-    const { height } = ref.getBoundingClientRect();
-
-    this.setState({
-      height
-    });
+    setTimeout(() => {
+      const { height } = ref.getBoundingClientRect();
+      this.containerRef.current.style.height = height + 'px';
+    }, 1);
   };
 
   render() {
@@ -140,10 +139,9 @@ export default class Toast extends React.PureComponent {
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
             style={{
-              height: this.state.height,
               zIndex: this.props.zIndex,
-              marginBottom: this.state.isShown ? 0 : -this.state.height
             }}
+            ref={this.containerRef}
           >
             <div ref={this.onRef} style={{ padding: 8 }}>
               <Alert
diff --git a/frontend/src/components/toast/toaster.css b/frontend/src/components/toast/toaster.css
index 3f70babe805..e76418b6da8 100644
--- a/frontend/src/components/toast/toaster.css
+++ b/frontend/src/components/toast/toaster.css
@@ -13,7 +13,8 @@
   flex-direction: column;
   align-items: center;
   height: 0;
-  transition: all 240ms cubic-bezier(0.0, 0.0, 0.2, 1);
+  margin-bottom: 0;
+  transition: all 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
 }
 
 @keyframes openAnimation {