From f544e69d0234afa3c49fedb2f38ec64149594382 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Thu, 29 Aug 2024 16:45:23 +0000
Subject: [PATCH] fix(mobile): modal styles on mobile (#8023)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/92c0cc55-1f75-42b7-a83f-4ffa6cf205ad.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/92c0cc55-1f75-42b7-a83f-4ffa6cf205ad.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/92c0cc55-1f75-42b7-a83f-4ffa6cf205ad.mp4">20240829-1420-07.7370936.mp4</video>
---
 packages/frontend/component/src/ui/modal/modal.tsx     | 4 +++-
 packages/frontend/component/src/ui/modal/styles.css.ts | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/component/src/ui/modal/modal.tsx b/packages/frontend/component/src/ui/modal/modal.tsx
index e883c9e6c..73bf6f1ea 100644
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.tsx
@@ -142,7 +142,9 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       children,
       contentWrapperClassName,
       contentWrapperStyle,
-      animation = 'fadeScaleTop',
+      animation = environment.isBrowser && environment.isMobile
+        ? 'slideBottom'
+        : 'fadeScaleTop',
       ...otherProps
     } = props;
     const { className: closeButtonClassName, ...otherCloseButtonProps } =
diff --git a/packages/frontend/component/src/ui/modal/styles.css.ts b/packages/frontend/component/src/ui/modal/styles.css.ts
index 48e12c36b..0add40f61 100644
--- a/packages/frontend/component/src/ui/modal/styles.css.ts
+++ b/packages/frontend/component/src/ui/modal/styles.css.ts
@@ -75,6 +75,13 @@ export const modalContentWrapper = style({
   alignItems: 'center',
   justifyContent: 'center',
   zIndex: cssVar('zIndexModal'),
+  '@media': {
+    'screen and (width <= 640px)': {
+      // todo: adjust animation
+      alignItems: 'flex-end',
+      paddingBottom: 32,
+    },
+  },
 
   selectors: {
     '&.anim-none': {