From c554e695148dc9d459c28b9aa27231bc6ca51b44 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Mon, 13 Apr 2026 12:11:15 -0700
Subject: [PATCH] Fill the width

---
 src/app/[orgId]/settings/(private)/billing/page.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/[orgId]/settings/(private)/billing/page.tsx b/src/app/[orgId]/settings/(private)/billing/page.tsx
index 8e125c536..fdf0d252a 100644
--- a/src/app/[orgId]/settings/(private)/billing/page.tsx
+++ b/src/app/[orgId]/settings/(private)/billing/page.tsx
@@ -491,6 +491,10 @@ export default function BillingPage() {
 
     const currentPlanId = getCurrentPlanId();
 
+    const visiblePlanOptions = planOptions.filter(
+        (plan) => plan.id !== "home" || currentPlanId === "home"
+    );
+
     // Check if subscription is in a problematic state that requires attention
     const hasProblematicSubscription = (): boolean => {
         if (!tierSubscription?.subscription) return false;
@@ -803,8 +807,8 @@ export default function BillingPage() {
                 </SettingsSectionHeader>
                 <SettingsSectionBody>
                     {/* Plan Cards Grid */}
-                    <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
-                        {planOptions.filter((plan) => plan.id !== "home" || currentPlanId === "home").map((plan) => {
+                    <div className={cn("grid grid-cols-1 gap-4", visiblePlanOptions.length === 5 ? "md:grid-cols-5" : "md:grid-cols-4")}>
+                        {visiblePlanOptions.map((plan) => {
                             const isCurrentPlan = plan.id === currentPlanId;
                             const planAction = getPlanAction(plan);