fix: adjust peek view modal container styles (#7173)

fix AFF-1233, AFF-1234

packages/frontend/core/src/modules/peek-view/view/doc-peek-view.tsx

@@ -140,7 +140,7 @@ export const SurfaceRefPeekView = ({
   useEffect(() => {
     let mounted = true;
     if (editorRef) {
-      editorRef.host.updateComplete
+      editorRef.host?.updateComplete
         .then(() => {
           if (mounted) {
             const viewport = {

packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts

@@ -6,11 +6,9 @@ export const transformOrigin = createVar();
 
 const contentShow = keyframes({
   from: {
-    opacity: 0,
     transform: 'scale(0.10)',
   },
   to: {
-    opacity: 1,
     transform: 'scale(1)',
   },
 });
@@ -45,7 +43,7 @@ const fadeOut = keyframes({
 
 const slideRight = keyframes({
   from: {
-    transform: 'translateX(-200%)',
+    transform: 'translateX(-100%)',
     opacity: 0,
   },
   to: {
@@ -60,7 +58,7 @@ const slideLeft = keyframes({
     opacity: 1,
   },
   to: {
-    transform: 'translateX(-200%)',
+    transform: 'translateX(-100%)',
     opacity: 0,
   },
 });
@@ -70,14 +68,14 @@ export const modalOverlay = style({
   inset: 0,
   zIndex: cssVar('zIndexModal'),
   backgroundColor: cssVar('black30'),
-  willChange: 'opacity',
+  opacity: 0,
   selectors: {
     '&[data-state=entered], &[data-state=entering]': {
       animation: `${fadeIn} ${animationTimeout} ease-in-out`,
       animationFillMode: 'forwards',
     },
     '&[data-state=exited], &[data-state=exiting]': {
-      animation: `${fadeOut} ${animationTimeout} ${animationTimeout} ease-in-out`,
+      animation: `${fadeOut} ${animationTimeout} ease-in-out`,
       animationFillMode: 'backwards',
     },
   },
@@ -124,7 +122,6 @@ export const modalContent = style({
       animationName: contentHide,
       animationDuration: animationTimeout,
       animationTimingFunction: 'cubic-bezier(0.42, 0, 0.58, 1)',
-      animationDelay: animationTimeout,
     },
   },
 });
@@ -143,7 +140,6 @@ export const modalControls = style({
       animationDuration: animationTimeout,
       animationFillMode: 'forwards',
       animationTimingFunction: 'ease-in-out',
-      animationDelay: `calc(${animationTimeout} / 2)`,
     },
     '&[data-state=exited], &[data-state=exiting]': {
       animationName: slideLeft,

packages/frontend/core/src/modules/peek-view/view/modal-container.tsx

@@ -74,7 +74,7 @@ export const PeekViewModalContainer = ({
   onAnimateEnd?: () => void;
 }>) => {
   const [{ status }, toggle] = useTransition({
-    timeout: animationTimeout * 1.5,
+    timeout: animationTimeout,
     onStateChange(event) {
       if (event.current.status === 'exited' && onAnimateEnd) {
         onAnimateEnd();
@@ -85,8 +85,13 @@ export const PeekViewModalContainer = ({
   useEffect(() => {
     toggle(open);
     const bondingBox = target ? getElementScreenPositionCenter(target) : null;
+    const offsetLeft =
+      (window.innerWidth - Math.min(window.innerWidth * 0.9, 1200)) / 2;
+    const modalHeight = window.innerHeight * 0.05;
     setTransformOrigin(
-      bondingBox ? `${bondingBox.x}px ${bondingBox.y}px` : null
+      bondingBox
+        ? `${bondingBox.x - offsetLeft}px ${bondingBox.y - modalHeight}px`
+        : null
     );
   }, [open, target]);
   return (

packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx

@@ -50,7 +50,9 @@ export const PeekViewManagerModal = () => {
       }
       controls={controls}
       // there is a bug for edgeless mode when showing the peek view during start up animation
-      hideOnEntering={activePeekView?.info.mode === 'edgeless'}
+      hideOnEntering={
+        !activePeekView?.info.mode || activePeekView?.info.mode === 'edgeless'
+      }
       onOpenChange={open => {
         if (!open) {
           peekViewEntity.close();