From a2a5c48a5a58a99b40024c09d7f705b1d5c378f2 Mon Sep 17 00:00:00 2001
From: Sven Efftinge <sven@gitpod.io>
Date: Tue, 6 Dec 2022 08:48:00 +0000
Subject: [PATCH] [ubp] smaller balance view impr

---
 .../components/UsageBasedBillingConfig.tsx    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/dashboard/src/components/UsageBasedBillingConfig.tsx b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
index 308923277addd4..c4c00e31bdf2e9 100644
--- a/components/dashboard/src/components/UsageBasedBillingConfig.tsx
+++ b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
@@ -207,7 +207,7 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
     };
 
     const balance = currentUsage * -1 + usageLimit;
-    const percentage = Math.max(Math.round((balance * 100) / usageLimit), 0);
+    const percentage = usageLimit === 0 ? 0 : Math.max(Math.round((balance * 100) / usageLimit), 0);
 
     return (
         <div className="mb-16">
@@ -237,18 +237,18 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                         </div>
                         <div className="mt-4 text-sm flex text-gray-400 dark:text-gray-500">
                             <span className="flex-grow">
-                                <span>Monthly limit: {usageLimit} Credits</span>
-                                {showManageBilling && (
-                                    <>
-                                        <span>&nbsp;&middot;&nbsp;</span>
-                                        <span className="gp-link" onClick={() => setShowUpdateLimitModal(true)}>
-                                            Update limit
-                                        </span>
-                                    </>
-                                )}
+                                {typeof currentUsage === "number" &&
+                                    typeof usageLimit === "number" &&
+                                    usageLimit > 0 && <span>{percentage}% remaining</span>}
                             </span>
-                            {typeof currentUsage === "number" && typeof usageLimit === "number" && usageLimit > 0 && (
-                                <span>{percentage}% remaining</span>
+                            <span>Monthly limit: {usageLimit} Credits</span>
+                            {showManageBilling && (
+                                <>
+                                    <span>&nbsp;&middot;&nbsp;</span>
+                                    <span className="gp-link" onClick={() => setShowUpdateLimitModal(true)}>
+                                        Update limit
+                                    </span>
+                                </>
                             )}
                         </div>
                         <div className="mt-2 flex">