From 10fbd4a9ff69400d8a5147089f2a6f876ca75dd8 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Thu, 30 Nov 2023 12:53:16 +0000
Subject: [PATCH] Fixed some illegal markup when using tooltips

---
 .../webapp/app/components/billing/PricingTiers.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/billing/PricingTiers.tsx b/apps/webapp/app/components/billing/PricingTiers.tsx
index 937823352..2c283ac50 100644
--- a/apps/webapp/app/components/billing/PricingTiers.tsx
+++ b/apps/webapp/app/components/billing/PricingTiers.tsx
@@ -42,7 +42,7 @@ export function PricingTiers({
   return (
     <div
       className={cn(
-        "flex min-w-full flex-col items-center justify-center gap-4 md:flex-row",
+        "flex min-w-full flex-col items-start justify-center gap-4 md:flex-row",
         className
       )}
     >
@@ -354,17 +354,15 @@ function TierLimit({
     <div>
       {pricedMetric ? (
         <>
-          <Paragraph variant="small/bright" className="mb-2 mt-6">
-            {children}
-          </Paragraph>
+          <div className="mb-2 mt-6 font-sans text-sm font-normal text-bright">{children}</div>
           <SegmentedControl name={"Concurrent Runs"} options={options} fullWidth />
         </>
       ) : (
         <>
           <hr className="my-[1.9rem]" />
-          <Paragraph variant="small/bright" className="mb-[0.6rem]">
+          <div className="mb-[0.6rem] mt-6 font-sans text-sm font-normal text-bright">
             {children}
-          </Paragraph>
+          </div>
         </>
       )}
     </div>
@@ -385,9 +383,9 @@ function FeatureItem({ checked, children }: { checked?: boolean; children: React
       ) : (
         <XMarkIcon className="h-4 w-4 text-slate-500" />
       )}
-      <Paragraph variant="small" className={cn(checked ? "text-bright" : "text-dimmed")}>
+      <div className={cn("font-sans text-sm font-normal", checked ? "text-bright" : "text-dimmed")}>
         {children}
-      </Paragraph>
+      </div>
     </li>
   );
 }