From 2c0145fbbca11623e56766b06e2ec0e8b9a00b3c Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Wed, 21 Oct 2026 15:51:43 +0800
Subject: [PATCH] style: wrap tier billing line under price and keep amounts
 with units

The longer billing lines added with the annual prices broke across two or three lines beside the price and split amounts from their units.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/style.css           | 3 ++-
 website/templates/sponsorship.html | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/website/static/style.css b/website/static/style.css
index d612f1c7..88d3a736 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -1457,8 +1457,9 @@ th[data-sort].sort-asc::after {
 
 .tier-price {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
-  gap: 0.55rem;
+  gap: 0.35rem 0.55rem;
   margin-bottom: 0.25rem;
 }
 
diff --git a/website/templates/sponsorship.html b/website/templates/sponsorship.html
index 46d546d8..c250a8f3 100644
--- a/website/templates/sponsorship.html
+++ b/website/templates/sponsorship.html
@@ -116,7 +116,7 @@
           <p class="tier-eyebrow">Headline Sponsor</p>
           <p class="tier-price">
             <span class="tier-amount">$500</span>
-            <span class="tier-cadence">/ month or $4,500 / year</span>
+            <span class="tier-cadence">/&nbsp;month or $4,500&nbsp;/&nbsp;year</span>
           </p>
           <p class="tier-summary">
             Logo pinned at the top of the README. Logo on the website.
@@ -139,7 +139,7 @@
           <p class="tier-eyebrow">Featured Sponsor</p>
           <p class="tier-price">
             <span class="tier-amount">$200</span>
-            <span class="tier-cadence">/ month or $1,800 / year</span>
+            <span class="tier-cadence">/&nbsp;month or $1,800&nbsp;/&nbsp;year</span>
           </p>
           <p class="tier-summary">
             Small logo and text link pinned at the top of the README. Logo and
@@ -166,7 +166,7 @@
           <p class="tier-eyebrow">Indie Dev Sponsor</p>
           <p class="tier-price">
             <span class="tier-amount">$99</span>
-            <span class="tier-cadence">/ month, $249 / quarter, or $891 / year</span>
+            <span class="tier-cadence">/&nbsp;month, $249&nbsp;/&nbsp;quarter, or $891&nbsp;/&nbsp;year</span>
           </p>
           <p class="tier-summary">
             Lower-cost text link for eligible indie developers and solo