Invite people after review, then finish the Rule, with login before inviting and Invite your members on Profile.

app/components/modals/Login/Login.view.tsx

@@ -23,14 +23,21 @@ export function LoginView({
   portalReady,
   usePortal,
   backdropVariant,
+  viewportHeight,
 }: LoginViewProps) {
   if (!isOpen) return null;
   if (usePortal && !portalReady) return null;
 
+  const phoneSheetStyle =
+    viewportHeight != null
+      ? { height: viewportHeight, maxHeight: viewportHeight }
+      : undefined;
+
   const content = (
     <div
       ref={backdropRef}
-      className={`fixed inset-0 z-[9998] flex flex-col items-center justify-center gap-6 overflow-y-auto px-4 py-8 ${backdropClasses[backdropVariant]}`}
+      className={`fixed inset-0 z-[9998] flex flex-col items-center gap-6 overflow-y-auto px-4 py-8 max-md:justify-end max-md:overflow-hidden max-md:px-0 max-md:py-0 md:justify-center ${backdropClasses[backdropVariant]}`}
+      style={phoneSheetStyle}
       onPointerDown={(event) => {
         if (event.target !== event.currentTarget) return;
         onClose();
@@ -43,7 +50,7 @@ export function LoginView({
         aria-modal="true"
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
-        className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`}
+        className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] max-md:max-h-full max-md:rounded-b-none ${className}`}
         onClick={(e) => e.stopPropagation()}
       >
         <ModalHeader onClose={onClose} showMoreOptionsButton={false} />
@@ -52,7 +59,10 @@ export function LoginView({
         </div>
       </div>
       {belowCard ? (
-        <div className="shrink-0" onClick={(e) => e.stopPropagation()}>
+        <div
+          className="shrink-0 max-md:w-full max-md:bg-[var(--color-surface-default-primary)] max-md:px-6 max-md:pb-6"
+          onClick={(e) => e.stopPropagation()}
+        >
           {belowCard}
         </div>
       ) : null}