From 180e32016146806b42a6cb1b465a1b48e42c7520 Mon Sep 17 00:00:00 2001
From: Travis Vachon <travis.vachon@gmail.com>
Date: Mon, 5 Feb 2024 12:03:35 -0800
Subject: [PATCH] fix: tweak plan page styles

there was an edge case right at one of the most common sizes, so:

a) use `nbsp`s to make sure the words in the usage bar never go to two levels
b) fine tune the `lg` breakpoint on the plan page

I'm using a custom width `w-[21rem]` that is still in-line with the design system but imho should not be used more widely so I've decided _not_ to add it to the tailwind config. If we end up using this in more places it should be added there later.
---
 src/app/plans/change/page.tsx | 4 ++--
 src/components/UsageBar.tsx   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/plans/change/page.tsx b/src/app/plans/change/page.tsx
index e704124..f2384e8 100644
--- a/src/app/plans/change/page.tsx
+++ b/src/app/plans/change/page.tsx
@@ -36,7 +36,7 @@ function PlanSection ({ planID, planName, flatFee, flatFeeAllotment, perGbFee }:
     setIsUpdatingPlan(false)
   }
   return (
-    <div className={`flex flex-col items-center rounded border-2 border-solid border-slate-800 w-96 p-8 ${isCurrentPlan ? 'bg-blue-800/10' : 'bg-slate-800/10'}`}>
+    <div className={`flex flex-col items-center rounded border-2 border-solid border-slate-800 w-[21rem] p-6 ${isCurrentPlan ? 'bg-blue-800/10' : 'bg-slate-800/10'}`}>
       <div className='text-2xl mb-6 flex flex-row justify-between w-full'>
         <div className='font-bold'>{planName}</div>
         <div>
@@ -87,7 +87,7 @@ export default function Plans () {
       <div className='py-8 flex flex-col items-center'>
         <h1 className='text-2xl font-mono mb-8 font-bold'>Plans</h1>
         <p className='mb-4'>Pick the price plan that works for you.</p>
-        <div className='flex flex-col space-y-2 2xl:flex-row 2xl:space-y-0 2xl:space-x-2'>
+        <div className='flex flex-col space-y-2 xl:flex-row xl:space-y-0 xl:space-x-2'>
           <PlanSection planID='did:web:starter.web3.storage' planName='Starter' flatFee={0} flatFeeAllotment={5} perGbFee={0.15} />
           <PlanSection planID='did:web:lite.web3.storage' planName='Lite' flatFee={10} flatFeeAllotment={100} perGbFee={0.05} />
           <PlanSection planID='did:web:business.web3.storage' planName='Business' flatFee={100} flatFeeAllotment={2000} perGbFee={0.03} />
diff --git a/src/components/UsageBar.tsx b/src/components/UsageBar.tsx
index 71b1964..fd0748e 100644
--- a/src/components/UsageBar.tsx
+++ b/src/components/UsageBar.tsx
@@ -61,16 +61,16 @@ export function UsageBar (): ReactNode {
     <div className='w-full'>
       {plan?.product ? (
         <div className='lg:text-right text-xs tracking-wider font-mono flex flex-row justify-end space-x-2'>
-          <div>Plan: <strong>{Plans[plan.product]?.name ?? plan.product}</strong></div>
+          <div>Plan:&nbsp;<strong>{Plans[plan.product]?.name ?? plan.product}</strong></div>
           <Link className='underline'
             href='/plans/change'
             title='Automated support for switching plans is currently in progress. to change your plan, please email support@web3.storage.'>
-            change plan
+            change&nbsp;plan
           </Link>
           <a className='underline'
             href={process.env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK}
             target='_blank' rel='noopener noreferrer'>
-            update billing
+            update&nbsp;billing
           </a>
         </div>
       ) : null}