From 584d095895d740d171a948e73213e72adb0f21fd Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Wed, 6 Nov 2024 02:59:11 +0000
Subject: [PATCH] fix(core): modal height issue (#8710)

fix AF-1616
---
 .../peek-view/view/modal-container.css.ts     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

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 09d336fbd..1d32c590e 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
@@ -30,15 +30,21 @@ export const modalContentContainer = style({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: 12,
-  selectors: {
-    [`${modalContentWrapper}:is([data-mode="max"], [data-mode="fit"], [data-mobile]) &`]:
-      {
-        height: '60%',
-        width: 'calc(100% - 32px)',
-        paddingRight: 0,
-        paddingBottom: 32,
-        alignSelf: 'flex-end',
+  '@media': {
+    // for small screen
+    'screen and (width <= 640px)': {
+      selectors: {
+        [`${modalContentWrapper}:is([data-mode="max"], [data-mode="fit"]) &`]: {
+          height: '60%',
+          width: 'calc(100% - 32px)',
+          paddingRight: 0,
+          paddingBottom: 32,
+          alignSelf: 'flex-end',
+        },
       },
+    },
+  },
+  selectors: {
     [`${modalContentWrapper}[data-mode="max"] &`]: {
       width: 'calc(100% - 64px)',
       height: 'calc(100% - 64px)',