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

app/components/modals/Login/Login.container.tsx

@@ -24,6 +24,9 @@ const LoginContainer = memo<LoginProps>(
     const backdropRef = useRef<HTMLDivElement>(null);
     const previousActiveElementRef = useRef<HTMLElement | null>(null);
     const [portalReady, setPortalReady] = useState(() => !usePortal);
+    const [viewportHeight, setViewportHeight] = useState<number | undefined>(
+      undefined,
+    );
 
     // Defer enabling the portal until after the layout commit so we don’t sync-setState
     // inside the effect (eslint react-hooks/set-state-in-effect) while still mounting
@@ -36,6 +39,24 @@ const LoginContainer = memo<LoginProps>(
       return () => cancelAnimationFrame(id);
     }, [usePortal]);
 
+    useEffect(() => {
+      if (!isOpen) return;
+      const vp = window.visualViewport;
+      const sync = () => {
+        const next = vp?.height ?? window.innerHeight;
+        setViewportHeight(next);
+      };
+      sync();
+      vp?.addEventListener("resize", sync);
+      vp?.addEventListener("scroll", sync);
+      window.addEventListener("resize", sync);
+      return () => {
+        vp?.removeEventListener("resize", sync);
+        vp?.removeEventListener("scroll", sync);
+        window.removeEventListener("resize", sync);
+      };
+    }, [isOpen]);
+
     useEffect(() => {
       if (!isOpen) return;
       if (usePortal && !portalReady) return;
@@ -132,6 +153,7 @@ const LoginContainer = memo<LoginProps>(
         portalReady={portalReady}
         usePortal={usePortal}
         backdropVariant={backdropVariant}
+        viewportHeight={viewportHeight}
       >
         {children}
       </LoginView>