From 5a6dd29d36a68d33861979f7c13083076cf08978 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Mon, 9 Dec 2024 03:48:07 +0000
Subject: [PATCH] fix(mobile): center peek styles (#9014)

fix AF-1876

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/af1191dd-4549-4c38-8948-2d726946d4fe.png)
---
 .../peek-view/view/doc-preview/doc-peek-view.css.ts |  4 ++--
 .../modules/peek-view/view/modal-container.css.ts   |  5 ++++-
 .../peek-view/view/peek-view-controls.css.ts        | 13 ++++++++++++-
 3 files changed, 18 insertions(+), 4 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 d770489c42..2c93448bbe 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,4 +1,4 @@
-import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
 
 export const root = style({
@@ -25,5 +25,5 @@ export const affineDocViewport = style({
   userSelect: 'none',
   containerName: 'viewport',
   containerType: 'inline-size',
-  background: cssVar('backgroundPrimaryColor'),
+  background: cssVarV2('layer/background/mobile/secondary'),
 });
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 6c16bd6b03..de9a85de0f 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
@@ -35,7 +35,7 @@ export const modalContentContainer = style({
     'screen and (width <= 640px)': {
       selectors: {
         [`${modalContentWrapper}:is([data-mode="max"], [data-mode="fit"]) &`]: {
-          height: '60%',
+          height: '80%',
           width: 'calc(100% - 32px)',
           paddingRight: 0,
           paddingBottom: 32,
@@ -103,6 +103,9 @@ export const modalControls = style({
   '@media': {
     'screen and (width <= 640px)': {
       top: -48,
+      right: 0,
+      left: 0,
+      padding: '8px',
     },
   },
 });
diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.css.ts b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.css.ts
index 3d8eb155a1..916244a202 100644
--- a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.css.ts
+++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.css.ts
@@ -7,7 +7,8 @@ export const root = style({
   gap: 8,
   '@media': {
     'screen and (width <= 640px)': {
-      flexDirection: 'row',
+      flexDirection: 'row-reverse',
+      width: '100%',
     },
   },
 });
@@ -16,4 +17,14 @@ export const button = style({
   borderRadius: 8,
   width: 32,
   height: 32,
+  '@media': {
+    'screen and (width <= 640px)': {
+      selectors: {
+        [`[data-action-name="close"]&`]: {
+          marginLeft: 'auto',
+          order: 0,
+        },
+      },
+    },
+  },
 });