style(webapp): make hobby and pro credits tooltip hoverable

Author: D-K-P

apps/webapp/app/components/DefinitionTooltip.tsx

@@ -6,14 +6,16 @@ export function DefinitionTip({
   content,
   children,
   title,
+  disableHoverableContent = true,
 }: {
   content: React.ReactNode;
   children: React.ReactNode;
   title: React.ReactNode;
+  disableHoverableContent?: boolean;
 }) {
   return (
     <TooltipProvider>
-      <Tooltip disableHoverableContent>
+      <Tooltip disableHoverableContent={disableHoverableContent}>
         <TooltipTrigger className="text-left">
           <span className="cursor-default underline decoration-charcoal-500 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-400">
             {children}

apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx

@@ -662,16 +662,17 @@ export function TierHobby({
       <ul className="flex flex-col gap-2.5">
         <FeatureItem checked>
           <DefinitionTip
+            disableHoverableContent={false}
             title="Credits included"
             content={
-              <>
-                This plan includes ${plan.limits.includedUsage / 100} of compute each month. After that's used, tasks
-                keep running and you're billed per our{" "}
-                <TextLink to="https://trigger.dev/pricing#computePricing">
+              <Paragraph variant="small/dimmed" spacing>
+                This plan includes ${plan.limits.includedUsage / 100} of compute each month. After
+                that's used, tasks keep running and you're billed per our{" "}
+                <TextLink target="_blank" to="https://trigger.dev/pricing#computePricing">
                   compute usage rates
                 </TextLink>
                 .
-              </>
+              </Paragraph>
             }
           >
             ${plan.limits.includedUsage / 100} / month credits included
@@ -807,16 +808,17 @@ export function TierPro({
       <ul className="flex flex-col gap-2.5">
         <FeatureItem checked>
           <DefinitionTip
+            disableHoverableContent={false}
             title="Credits included"
             content={
-              <>
-                This plan includes ${plan.limits.includedUsage / 100} of compute each month. After that's used, tasks
-                keep running and you're billed per our{" "}
-                <TextLink to="https://trigger.dev/pricing#computePricing">
+              <Paragraph variant="small/dimmed" spacing>
+                This plan includes ${plan.limits.includedUsage / 100} of compute each month. After
+                that's used, tasks keep running and you're billed per our{" "}
+                <TextLink target="_blank" to="https://trigger.dev/pricing#computePricing">
                   compute usage rates
                 </TextLink>
                 .
-              </>
+              </Paragraph>
             }
           >
             ${plan.limits.includedUsage / 100} / month credits included