From 65e65202674ccf9db4b49401791ac3af2a48e353 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Tue, 19 Aug 2025 13:32:15 -0400
Subject: [PATCH] refactor: update layout and card components for improved
 responsiveness

- Increased maximum widths for card components in PostPaymentOnboarding and OrganizationSetupForm to enhance layout flexibility.
- Adjusted the OnboardingLayout to center children elements and add padding for better visual alignment.
- Improved overall user experience by ensuring components adapt more effectively to different screen sizes.
---
 .../app/(app)/onboarding/components/PostPaymentOnboarding.tsx | 4 ++--
 .../src/app/(app)/setup/components/OrganizationSetupForm.tsx  | 4 ++--
 apps/app/src/components/onboarding/OnboardingLayout.tsx       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx b/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx
index 1cc297926..e9a2f3ee0 100644
--- a/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx
+++ b/apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx
@@ -63,8 +63,8 @@ export function PostPaymentOnboarding({
 
   return (
     <div className="scrollbar-hide flex min-h-[calc(100vh-50px)] flex-col items-center justify-center p-4">
-      <div className="relative w-full max-w-2xl">
-        <Card className="scrollbar-hide relative flex w-full flex-col bg-card/80 dark:bg-card/70 backdrop-blur-xl border border-border/50 shadow-2xl">
+      <div className="relative w-full max-w-6xl">
+        <Card className="scrollbar-hide relative mx-auto flex w-full max-w-3xl flex-col bg-card/80 dark:bg-card/70 backdrop-blur-xl border border-border/50 shadow-2xl md:w-[680px] lg:w-[820px] xl:w-[920px]">
           {(isLoading || isFinalizing) && (
             <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg bg-background/80 backdrop-blur-sm">
               <LogoSpinner />
diff --git a/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx b/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx
index 04fd50184..15e5509f6 100644
--- a/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx
+++ b/apps/app/src/app/(app)/setup/components/OrganizationSetupForm.tsx
@@ -95,8 +95,8 @@ export function OrganizationSetupForm({
     </div>
   ) : (
     <div className="scrollbar-hide flex min-h-[calc(100vh-50px)] flex-col items-center justify-center p-4">
-      <div className="relative w-full max-w-2xl">
-        <Card className="scrollbar-hide relative flex w-full flex-col bg-card/80 dark:bg-card/70 backdrop-blur-xl border border-border/50 shadow-2xl">
+      <div className="relative w-full max-w-5xl">
+        <Card className="scrollbar-hide relative mx-auto flex w-full min-w-[640px] sm:min-w-[720px] flex-col bg-card/80 dark:bg-card/70 backdrop-blur-xl border border-border/50 shadow-2xl">
           {isLoadingFrameworks && step.key === 'frameworkIds' && (
             <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg bg-background/80 backdrop-blur-sm">
               <LogoSpinner />
diff --git a/apps/app/src/components/onboarding/OnboardingLayout.tsx b/apps/app/src/components/onboarding/OnboardingLayout.tsx
index e3e77e50e..eed6964dc 100644
--- a/apps/app/src/components/onboarding/OnboardingLayout.tsx
+++ b/apps/app/src/components/onboarding/OnboardingLayout.tsx
@@ -39,7 +39,7 @@ export async function OnboardingLayout({
         currentOrganization={currentOrganization}
         variant={variant}
       />
-      <div className="flex flex-1">{children}</div>
+      <div className="flex flex-1 items-center justify-center px-4">{children}</div>
     </main>
   );
 }