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.

Author: Marfuen

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 />

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 />

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>
   );
 }