fix: center peek responsiveness update (#7814)

fix PD-1407
toeverything · Aug 9, 2024 · d82f4b5 · d82f4b5
1 parent a579cc7
commit d82f4b5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 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
@@ -1,18 +1,24 @@
 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',
 });
 
 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
@@ -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
@@ -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}
             >