feat(mobile): setting page ui (#8048)

AF-1275

packages/frontend/component/src/ui/modal/modal.tsx

@@ -39,6 +39,10 @@ export interface ModalProps extends DialogProps {
    * @default 'fadeScaleTop'
    */
   animation?: 'fadeScaleTop' | 'none' | 'slideBottom';
+  /**
+   * Whether to show the modal in full screen mode
+   */
+  fullScreen?: boolean;
 }
 type PointerDownOutsideEvent = Parameters<
   Exclude<DialogContentProps['onPointerDownOutside'], undefined>
@@ -144,6 +148,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       animation = environment.isBrowser && environment.isMobile
         ? 'slideBottom'
         : 'fadeScaleTop',
+      fullScreen,
       ...otherProps
     } = props;
     const { className: closeButtonClassName, ...otherCloseButtonProps } =
@@ -209,6 +214,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
             {...otherOverlayOptions}
           />
           <div
+            data-full-screen={fullScreen}
             data-modal={modal}
             className={clsx(
               `anim-${animation}`,
@@ -223,8 +229,14 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
               className={clsx(styles.modalContent, contentClassName)}
               style={{
                 ...assignInlineVars({
-                  [styles.widthVar]: getVar(width, '50vw'),
-                  [styles.heightVar]: getVar(height, 'unset'),
+                  [styles.widthVar]: getVar(
+                    width,
+                    fullScreen ? '100dvw' : '50dvw'
+                  ),
+                  [styles.heightVar]: getVar(
+                    height,
+                    fullScreen ? '100dvh' : 'unset'
+                  ),
                   [styles.minHeightVar]: getVar(minHeight, '26px'),
                 }),
                 ...contentStyle,

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -84,6 +84,9 @@ export const modalContentWrapper = style({
   },
 
   selectors: {
+    '&[data-full-screen="true"]': {
+      padding: '0 !important',
+    },
     '&.anim-none': {
       animation: 'none',
     },
@@ -136,6 +139,19 @@ export const modalContent = style({
   borderRadius: '12px',
   // :focus-visible will set outline
   outline: 'none',
+
+  selectors: {
+    '[data-full-screen="true"] &': {
+      vars: {
+        [widthVar]: '100vw',
+        [heightVar]: '100vh',
+        [minHeightVar]: '100vh',
+      },
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      borderRadius: 0,
+    },
+  },
 });
 export const closeButton = style({
   position: 'absolute',