fix(mobile): adjust peek view style for mobile (#8003)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/c3a04128-0309-4df6-ab6d-0a5129483c73.png)

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

@@ -31,6 +31,19 @@ export const modalContentContainer = style({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: 12,
+  '@media': {
+    'screen and (width <= 640px)': {
+      selectors: {
+        '[data-padding="true"] &': {
+          height: '60%',
+          width: 'calc(100% - 32px)',
+          paddingRight: 0,
+          paddingBottom: 32,
+          alignSelf: 'flex-end',
+        },
+      },
+    },
+  },
   selectors: {
     '[data-padding="true"] &': {
       width: 'calc(100% - 64px)',
@@ -79,4 +92,9 @@ export const modalControls = style({
   minWidth: '48px',
   padding: '8px 0 0 16px',
   pointerEvents: 'auto',
+  '@media': {
+    'screen and (width <= 640px)': {
+      top: -48,
+    },
+  },
 });

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

@@ -5,6 +5,11 @@ export const root = style({
   flexDirection: 'column',
   height: '100%',
   gap: 8,
+  '@media': {
+    'screen and (width <= 640px)': {
+      flexDirection: 'row',
+    },
+  },
 });
 
 export const button = style({

packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.css.ts

@@ -73,6 +73,10 @@ globalStyle('.doc-title-container', {
   },
 });
 
+globalStyle('[data-peek-view-wrapper] .doc-title-container', {
+  fontSize: cssVar('fontH6'),
+});
+
 globalStyle('.affine-page-root-block-container', {
   '@container': {
     [`viewport (width <= 640px)`]: {