From adf314d59497278138a30d1f0d43ed81ac5c3e93 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Thu, 29 Aug 2024 16:45:22 +0000
Subject: [PATCH] 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)
---
 .../peek-view/view/modal-container.css.ts      | 18 ++++++++++++++++++
 .../peek-view/view/peek-view-controls.css.ts   |  5 +++++
 .../workspace/detail/mobile-detail-page.css.ts |  4 ++++
 3 files changed, 27 insertions(+)

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 f1819c3a0f..19feed90e3 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
@@ -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,
+    },
+  },
 });
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 1bc13e69cb..3d8eb155a1 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
@@ -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({
diff --git a/packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.css.ts b/packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.css.ts
index ad20d552c0..98430208c5 100644
--- a/packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.css.ts
+++ b/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)`]: {