From a11cb6b0cd71b8968b658c014e2874ef4ed2978e Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Tue, 11 Jun 2024 03:18:53 +0000
Subject: [PATCH] fix: peek view modal controls animation (#7180)

---
 .../peek-view/view/modal-container.css.ts     | 29 +++++++++----------
 .../peek-view/view/modal-container.tsx        |  3 +-
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts b/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
index 37b9c234a..627c8831a 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
@@ -43,7 +43,7 @@ const fadeOut = keyframes({
 
 const slideRight = keyframes({
   from: {
-    transform: 'translateX(-100%)',
+    transform: 'translateX(-200%)',
     opacity: 0,
   },
   to: {
@@ -58,7 +58,7 @@ const slideLeft = keyframes({
     opacity: 1,
   },
   to: {
-    transform: 'translateX(-100%)',
+    transform: 'translateX(-200%)',
     opacity: 0,
   },
 });
@@ -96,18 +96,6 @@ export const modalContentContainer = style({
   width: '90%',
   height: '90%',
   maxWidth: 1248,
-});
-
-export const modalContent = style({
-  flex: 1,
-  height: '100%',
-  backgroundColor: cssVar('backgroundOverlayPanelColor'),
-  boxShadow: '0px 0px 0px 2.23px rgba(0, 0, 0, 0.08)',
-  borderRadius: '8px',
-  minHeight: 300,
-  // :focus-visible will set outline
-  outline: 'none',
-  position: 'relative',
   willChange: 'transform, opacity',
   transformOrigin: transformOrigin,
   selectors: {
@@ -126,13 +114,24 @@ export const modalContent = style({
   },
 });
 
+export const modalContent = style({
+  flex: 1,
+  height: '100%',
+  backgroundColor: cssVar('backgroundOverlayPanelColor'),
+  boxShadow: '0px 0px 0px 2.23px rgba(0, 0, 0, 0.08)',
+  borderRadius: '8px',
+  minHeight: 300,
+  // :focus-visible will set outline
+  outline: 'none',
+  position: 'relative',
+});
+
 export const modalControls = style({
   flexShrink: 0,
   zIndex: -1,
   minWidth: '48px',
   padding: '8px 0 0 16px',
   opacity: 0,
-  transformOrigin: transformOrigin,
   pointerEvents: 'auto',
   selectors: {
     '&[data-state=entered], &[data-state=entering]': {
diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
index e5b7d1ec1..3354883dc 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
@@ -114,11 +114,10 @@ export const PeekViewModalContainer = ({
               [styles.animationTimeout]: `${animationTimeout}ms`,
             })}
           >
-            <div className={styles.modalContentContainer}>
+            <div className={styles.modalContentContainer} data-state={status}>
               <Dialog.Content
                 {...contentOptions}
                 className={styles.modalContent}
-                data-state={status}
               >
                 {hideOnEntering && status === 'entering' ? null : children}
               </Dialog.Content>