From a8d664a03ec5d826db004fc9f4519d08bdba9334 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Tue, 12 Nov 2024 08:19:09 +0000
Subject: [PATCH] fix(core): avoid shaking when center-peek opened (#8780)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close AF-1668;

We calculate the final width through modalContent at the start of the animation, so the calculated width is unexpected when there is a `padding`.
---
 .../core/src/modules/peek-view/view/modal-container.css.ts    | 4 +---
 1 file changed, 1 insertion(+), 3 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 1d32c590ef..6c16bd6b03 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
@@ -48,7 +48,6 @@ export const modalContentContainer = style({
     [`${modalContentWrapper}[data-mode="max"] &`]: {
       width: 'calc(100% - 64px)',
       height: 'calc(100% - 64px)',
-      paddingRight: 48,
     },
     [`${modalContentWrapper}[data-mode="full"] &`]: {
       width: '100%',
@@ -57,7 +56,6 @@ export const modalContentContainer = style({
     [`${modalContentWrapper}[data-mode="fit"] &`]: {
       width: '90%',
       height: '90%',
-      paddingRight: 48,
       maxWidth: 1248,
     },
     '&[data-anime-state="animating"]': {
@@ -96,7 +94,7 @@ export const modalContent = style({
 
 export const modalControls = style({
   position: 'absolute',
-  right: 0,
+  right: -48,
   top: 0,
   zIndex: -1,
   minWidth: '48px',