From 5fc5a3ebca45f64648abf784238d7e256f94f491 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Thu, 2 Jul 2026 11:49:49 -0400
Subject: [PATCH] Adjust spacing

---
 .../settings/(private)/billing/page.tsx       | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/[orgId]/settings/(private)/billing/page.tsx b/src/app/[orgId]/settings/(private)/billing/page.tsx
index b3d1bb351..aa121838f 100644
--- a/src/app/[orgId]/settings/(private)/billing/page.tsx
+++ b/src/app/[orgId]/settings/(private)/billing/page.tsx
@@ -1057,21 +1057,23 @@ export default function BillingPage() {
                     </SettingsSectionDescription>
                 </SettingsSectionHeader>
                 <SettingsSectionBody>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                         {/* Current Usage */}
-                        <div className="border rounded-lg p-4">
+                        <div className="border rounded-lg p-4 md:col-span-1">
                             <div className="text-sm text-muted-foreground mb-2">
                                 {t("billingCurrentUsage") || "Current Usage"}
                             </div>
-                            <div className="flex items-baseline gap-2">
-                                <span className="text-3xl font-semibold">
-                                    {getUserCount()}
-                                </span>
-                                <span className="text-lg">
-                                    {t("billingUsers") || "Users"}
-                                </span>
+                            <div className="flex flex-col items-start gap-1">
+                                <div className="flex items-baseline gap-2">
+                                    <span className="text-3xl font-semibold">
+                                        {getUserCount()}
+                                    </span>
+                                    <span className="text-lg">
+                                        {t("billingUsers") || "Users"}
+                                    </span>
+                                </div>
                                 {hasSubscription && getPricePerUser() > 0 && (
-                                    <div className="text-sm text-muted-foreground mt-1">
+                                    <div className="text-sm text-muted-foreground">
                                         x ${getPricePerUser()} / month = $
                                         {getUserCount() * getPricePerUser()} /
                                         month
@@ -1081,7 +1083,7 @@ export default function BillingPage() {
                         </div>
 
                         {/* Maximum Limits */}
-                        <div className="border rounded-lg p-4">
+                        <div className="border rounded-lg p-4 md:col-span-3">
                             <div className="text-sm text-muted-foreground mb-3">
                                 {t("billingMaximumLimits") || "Maximum Limits"}
                             </div>