fix(core): center peek width styles (#8276)

fix AF-1369

packages/frontend/core/src/modules/peek-view/entities/peek-view.ts

@@ -184,6 +184,7 @@ function resolvePeekInfoFromPeekTarget(
 }
 
 export type PeekViewAnimation = 'fade' | 'zoom' | 'none';
+export type PeekViewMode = 'full' | 'fit' | 'max';
 
 export class PeekViewEntity extends Entity {
   private readonly _active$ = new LiveData<ActivePeekView | null>(null);

packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.css.ts

@@ -7,7 +7,7 @@ export const root = style({
 
 export const editor = style({
   vars: {
-    '--affine-editor-side-padding': '160px',
+    '--affine-editor-side-padding': '96px',
   },
   minHeight: '100%',
 });

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

@@ -24,17 +24,16 @@ export const modalContentWrapper = style({
 });
 
 export const modalContentContainer = style({
-  width: '100%',
-  height: '100%',
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: 12,
   '@media': {
+    // mobile:
     'screen and (width <= 640px)': {
       selectors: {
-        '[data-padding="true"] &': {
+        [`${modalContentWrapper}:is([data-mode="max"], [data-mode="fit"]) &`]: {
           height: '60%',
           width: 'calc(100% - 32px)',
           paddingRight: 0,
@@ -45,11 +44,21 @@ export const modalContentContainer = style({
     },
   },
   selectors: {
-    '[data-padding="true"] &': {
+    [`${modalContentWrapper}[data-mode="max"] &`]: {
       width: 'calc(100% - 64px)',
       height: 'calc(100% - 64px)',
       paddingRight: 48,
     },
+    [`${modalContentWrapper}[data-mode="full"] &`]: {
+      width: '100%',
+      height: '100%',
+    },
+    [`${modalContentWrapper}[data-mode="fit"] &`]: {
+      width: '90%',
+      height: '90%',
+      paddingRight: 48,
+      maxWidth: 1248,
+    },
     '&[data-anime-state="animating"]': {
       opacity: 0,
     },

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

@@ -14,7 +14,7 @@ import {
 } from 'react';
 
 import { EditorSettingService } from '../../editor-settting';
-import type { PeekViewAnimation } from '../entities/peek-view';
+import type { PeekViewAnimation, PeekViewMode } from '../entities/peek-view';
 import * as styles from './modal-container.css';
 
 const contentOptions: Dialog.DialogContentProps = {
@@ -55,7 +55,7 @@ export type PeekViewModalContainerProps = PropsWithChildren<{
   controls?: React.ReactNode;
   onAnimationStart?: () => void;
   onAnimateEnd?: () => void;
-  padding?: boolean;
+  mode?: PeekViewMode;
   animation?: PeekViewAnimation;
   testId?: string;
   /** Whether to apply shadow & bg */
@@ -77,7 +77,7 @@ export const PeekViewModalContainer = forwardRef<
     onAnimationStart,
     onAnimateEnd,
     animation = 'zoom',
-    padding = true,
+    mode = 'fit',
     dialogFrame = true,
   },
   ref
@@ -318,9 +318,9 @@ export const PeekViewModalContainer = forwardRef<
           />
           <div
             ref={ref}
-            data-padding={padding}
+            data-mode={mode}
             data-peek-view-wrapper
-            className={clsx(styles.modalContentWrapper)}
+            className={styles.modalContentWrapper}
           >
             <div
               data-anime-state={animeState}

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

@@ -66,6 +66,13 @@ const renderControls = ({ info }: ActivePeekView) => {
   return <DefaultPeekViewControls />;
 };
 
+const getMode = (info: ActivePeekView['info']) => {
+  if (info.type === 'image') {
+    return 'full';
+  }
+  return 'fit';
+};
+
 const getRendererProps = (
   activePeekView?: ActivePeekView
 ): Partial<PeekViewModalContainerProps> | undefined => {
@@ -82,7 +89,7 @@ const getRendererProps = (
       activePeekView?.target instanceof HTMLElement
         ? activePeekView.target
         : undefined,
-    padding: activePeekView.info.type !== 'image',
+    mode: getMode(activePeekView.info),
     dialogFrame: activePeekView.info.type !== 'image',
   };
 };