Improve the onboarding plan page so it scrolls on smaller screens

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx

@@ -1,7 +1,7 @@
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { BackgroundWrapper } from "~/components/BackgroundWrapper";
-import { AppContainer } from "~/components/layout/AppLayout";
+import { AppContainer, MainBody, PageBody } from "~/components/layout/AppLayout";
 import { Header1 } from "~/components/primitives/Headers";
 import { prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
@@ -49,22 +49,24 @@ export default function ChoosePlanPage() {
     useTypedLoaderData<typeof loader>();
 
   return (
-    <AppContainer className="bg-charcoal-900">
-      <BackgroundWrapper>
-        <div className="mx-auto flex h-full w-full max-w-[80rem] flex-col items-center justify-center gap-8 p-3">
-          <Header1 className="text-center">Subscribe for full access</Header1>
-          <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
-            <PricingPlans
-              plans={plans}
-              subscription={v3Subscription}
-              organizationSlug={organizationSlug}
-              hasPromotedPlan
-              showGithubVerificationBadge
-              periodEnd={periodEnd}
-            />
+    <BackgroundWrapper>
+      <AppContainer>
+        <PageBody>
+          <div className="mx-auto mt-4 flex h-fit min-h-full max-w-[80rem] flex-col items-center justify-center gap-8 lg:mt-0">
+            <Header1 className="text-center">Subscribe for full access</Header1>
+            <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+              <PricingPlans
+                plans={plans}
+                subscription={v3Subscription}
+                organizationSlug={organizationSlug}
+                hasPromotedPlan
+                showGithubVerificationBadge
+                periodEnd={periodEnd}
+              />
+            </div>
           </div>
-        </div>
-      </BackgroundWrapper>
-    </AppContainer>
+        </PageBody>
+      </AppContainer>
+    </BackgroundWrapper>
   );
 }