fix(mobile): modal styles on mobile (#8023)

<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

@@ -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 } =

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': {