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)

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'),
 });

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',
     },
   },
 });

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,
+        },
+      },
+    },
+  },
 });