chore(webapp): pricing page improvements (#2457)

* Improve styling of onboarding pricing plans

* type only import

* Improve the onboarding plan page so it scrolls on smaller screens

* Adds additional pricing for bolt-ons for the Pro plan

* fix text wrapping issue

* add bg color back in

Author: samejr

apps/webapp/app/components/DefinitionTooltip.tsx

@@ -14,7 +14,7 @@ export function DefinitionTip({
   return (
     <TooltipProvider>
       <Tooltip disableHoverableContent>
-        <TooltipTrigger>
+        <TooltipTrigger className="text-left">
           <span className="cursor-default underline decoration-charcoal-500 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-400">
             {children}
           </span>

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

@@ -1,7 +1,7 @@
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+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}
-            />
+    <AppContainer>
+      <PageBody className="bg-charcoal-900">
+        <BackgroundWrapper>
+          <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>
+        </BackgroundWrapper>
+      </PageBody>
     </AppContainer>
   );
 }