packages/frontend/src/components/projects/create/Configure.tsx

@@ -581,11 +581,6 @@ const Configure = () => {
                   onAccountChange={onAccountChange}
                   isDataReceived={isAccountsDataReceived}
                 />
-                <IFrameModal
-                  setAccounts={setAccounts}
-                  setIsDataReceived={setIsAccountsDataReceived}
-                  isVisible={isFrameVisible}
-                />
                 {accounts.length > 0 && (
                   <div>
                     <Button
@@ -617,6 +612,12 @@ const Configure = () => {
             )}
           </form>
         </FormProvider>
+
+        <IFrameModal
+          setAccounts={setAccounts}
+          setIsDataReceived={setIsAccountsDataReceived}
+          isVisible={isFrameVisible}
+        />
       </div>
     </div>
   );

packages/frontend/src/pages/org-slug/projects/create/layout.tsx

@@ -1,12 +1,14 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Link, Outlet, useParams } from 'react-router-dom';
+import { useMediaQuery } from 'usehooks-ts';
+
+import * as Dialog from '@radix-ui/react-dialog';
 
 import { Heading } from 'components/shared/Heading';
 import { WavyBorder } from 'components/shared/WavyBorder';
 import { Button } from 'components/shared/Button';
 import { CrossIcon } from 'components/shared/CustomIcon';
 import { cn } from 'utils/classnames';
-import * as Dialog from '@radix-ui/react-dialog';
 
 export interface CreateProjectLayoutProps
   extends ComponentPropsWithoutRef<'section'> {}
@@ -16,6 +18,7 @@ export const CreateProjectLayout = ({
   ...props
 }: CreateProjectLayoutProps) => {
   const { orgSlug } = useParams();
+  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
 
   const closeBtnLink = `/${orgSlug}`;
 
@@ -28,9 +31,8 @@ export const CreateProjectLayout = ({
     </Heading>
   );
 
-  return (
+  return isDesktopView ? (
-    <>
+    // Desktop
-      {/* Desktop */}
     <section
       {...props}
       className={cn(
@@ -54,14 +56,13 @@ export const CreateProjectLayout = ({
         </div>
         <WavyBorder />
       </div>
-
       <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
         <Outlet />
       </section>
     </section>
-
+  ) : (
-      {/* Mobile */}
+    // Mobile
-      {/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */}
+    // Setting modal={false} so even if modal is active on desktop, it doesn't block clicks
     <Dialog.Root modal={false} open={true}>
       <Dialog.Portal>
         {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
@@ -94,6 +95,5 @@ export const CreateProjectLayout = ({
         </div>
       </Dialog.Portal>
     </Dialog.Root>
-    </>
   );
 };