From d82f4b546104443b1467b38f0c626bee7dd62db8 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Fri, 9 Aug 2024 11:48:50 +0000
Subject: [PATCH] fix: center peek responsiveness update (#7814)

fix PD-1407
---
 .../peek-view/view/doc-preview/doc-peek-view.css.ts    | 10 ++++++++--
 .../src/modules/peek-view/view/modal-container.css.ts  |  8 ++++----
 .../src/modules/peek-view/view/modal-container.tsx     |  3 +++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.css.ts b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.css.ts
index fab83c13ea29c..1dfe34b7d19a3 100644
--- a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.css.ts
+++ b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.css.ts
@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const root = style({
   containerType: 'inline-size',
@@ -7,12 +7,18 @@ export const root = style({
 
 export const editor = style({
   vars: {
-    '--affine-editor-width': '100%',
     '--affine-editor-side-padding': '160px',
   },
   minHeight: '100%',
 });
 
+globalStyle(`[data-full-width-layout="true"] ${editor}`, {
+  vars: {
+    '--affine-editor-width': '100%',
+    '--affine-editor-side-padding': '24px',
+  },
+});
+
 export const affineDocViewport = style({
   display: 'flex',
   flexDirection: 'column',
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 4dc4454477af0..f1819c3a0f19d 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
@@ -33,9 +33,9 @@ export const modalContentContainer = style({
   borderRadius: 12,
   selectors: {
     '[data-padding="true"] &': {
-      width: '90%',
-      height: '90%',
-      maxWidth: 1248,
+      width: 'calc(100% - 64px)',
+      height: 'calc(100% - 64px)',
+      paddingRight: 48,
     },
     '&[data-anime-state="animating"]': {
       opacity: 0,
@@ -73,7 +73,7 @@ export const modalContent = style({
 
 export const modalControls = style({
   position: 'absolute',
-  left: '100%',
+  right: 0,
   top: 0,
   zIndex: -1,
   minWidth: '48px',
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 8d87d74b6a9cb..8e9f8b83bce59 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
@@ -1,3 +1,4 @@
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import * as Dialog from '@radix-ui/react-dialog';
 import anime, { type AnimeInstance, type AnimeParams } from 'animejs';
 import clsx from 'clsx';
@@ -89,6 +90,7 @@ export const PeekViewModalContainer = forwardRef<
   const overlayRef = useRef<HTMLDivElement>(null);
   const controlsRef = useRef<HTMLDivElement>(null);
   const prevAnimeMap = useRef<Record<string, AnimeInstance | undefined>>({});
+  const { appSettings } = useAppSettingHelper();
 
   const animateControls = useCallback((animateIn = false) => {
     const controls = controlsRef.current;
@@ -318,6 +320,7 @@ export const PeekViewModalContainer = forwardRef<
           >
             <div
               data-anime-state={animeState}
+              data-full-width-layout={appSettings.fullWidthLayout}
               ref={contentClipRef}
               className={styles.modalContentContainer}
             >