Update PricingSection component to adjust the styling of the promotional text for better visibility and layout consistency.

goldflag · goldflag · commit 392d55e9cde8 · 2026-03-07T22:55:46.000-08:00
diff --git a/docs/src/components/PricingSection.tsx b/docs/src/components/PricingSection.tsx
@@ -187,7 +187,7 @@ export function PricingSection({ isAnnual, setIsAnnual }: { isAnnual: boolean, s
                 >
                   {t("Annual")}
                 </button>
-                <div className="text-xs text-white absolute top-0 right-0 -translate-y-3 translate-x-1/2 bg-emerald-500 dark:bg-emerald-500 rounded-full px-2 py-0.5">
+                <div className="text-xs text-white absolute top-0 right-0 -translate-y-3 bg-emerald-500 dark:bg-emerald-500 rounded-full px-2 py-0.5 whitespace-nowrap">
                   {t("4 months free")}
                 </div>
               </div>

Original file line number	Diff line number	Diff line change
`@@ -187,7 +187,7 @@ export function PricingSection({ isAnnual, setIsAnnual }: { isAnnual: boolean, s`
`187`	`187`	`>`
`188`	`188`	`{t("Annual")}`
`189`	`189`	`</button>`
`190`		`- <div className="text-xs text-white absolute top-0 right-0 -translate-y-3 translate-x-1/2 bg-emerald-500 dark:bg-emerald-500 rounded-full px-2 py-0.5">`
	`190`	`+ <div className="text-xs text-white absolute top-0 right-0 -translate-y-3 bg-emerald-500 dark:bg-emerald-500 rounded-full px-2 py-0.5 whitespace-nowrap">`
`191`	`191`	`{t("4 months free")}`
`192`	`192`	`</div>`
`193`	`193`	`</div>`