From 8d4fe36fc1597190a7510ec6e61aa1d77cae64d1 Mon Sep 17 00:00:00 2001
From: ogzhanolguncu <ogzhan11@gmail.com>
Date: Mon, 3 Mar 2025 21:16:03 +0300
Subject: [PATCH 1/3] fix: format number issue and make cards bigger

---
 .../stats-card/components/metric-stats.tsx      |  6 ++++--
 apps/dashboard/components/stats-card/index.tsx  | 17 ++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/components/stats-card/components/metric-stats.tsx b/apps/dashboard/components/stats-card/components/metric-stats.tsx
index 36ce44ad66..e7e2c2ff77 100644
--- a/apps/dashboard/components/stats-card/components/metric-stats.tsx
+++ b/apps/dashboard/components/stats-card/components/metric-stats.tsx
@@ -1,3 +1,5 @@
+import { formatNumber } from "@/lib/fmt";
+
 export const MetricStats = ({
   successCount,
   errorCount,
@@ -13,14 +15,14 @@ export const MetricStats = ({
     <div className="flex flex-col gap-1">
       <div className="flex gap-2 items-center">
         <div className="bg-accent-8 rounded h-[10px] w-1" />
-        <div className="text-accent-12 text-xs font-medium">{successCount}</div>
+        <div className="text-accent-12 text-xs font-medium">{formatNumber(successCount)}</div>
         <div className="text-accent-9 text-[11px] leading-4">{successLabel}</div>
       </div>
     </div>
     <div className="flex flex-col gap-1">
       <div className="flex gap-2 items-center">
         <div className="bg-orange-9 rounded h-[10px] w-1" />
-        <div className="text-accent-12 text-xs font-medium">{errorCount}</div>
+        <div className="text-accent-12 text-xs font-medium">{formatNumber(errorCount)}</div>
         <div className="text-accent-9 text-[11px] leading-4">{errorLabel}</div>
       </div>
     </div>
diff --git a/apps/dashboard/components/stats-card/index.tsx b/apps/dashboard/components/stats-card/index.tsx
index 1a70375cc0..24d0d5fbcc 100644
--- a/apps/dashboard/components/stats-card/index.tsx
+++ b/apps/dashboard/components/stats-card/index.tsx
@@ -25,16 +25,16 @@ export const StatsCard = ({
 }: StatsCardProps) => {
   return (
     <div className="flex flex-col border border-gray-6 rounded-xl overflow-hidden">
-      <div className="h-[120px]">{chart}</div>
+      <div className="h-[140px]">{chart}</div>
       <Link href={linkPath}>
-        <div className="p-4 md:p-6 border-t border-gray-6 flex flex-col gap-1">
-          <div className="flex justify-between items-center flex-wrap">
-            <div className="flex flex-col">
+        <div className="p-4 md:p-6 border-t border-gray-6 flex flex-col gap-2">
+          <div className="flex justify-between items-center">
+            <div className="flex flex-col flex-grow min-w-0">
               <div className="flex gap-2 md:gap-3 items-center">
                 <span className="flex-shrink-0">{icon}</span>
                 <Tooltip>
                   <TooltipTrigger>
-                    <div className="text-accent-12 font-semibold truncate w-[180px] text-left">
+                    <div className="text-accent-12 font-semibold truncate w-[220px] md:w-[280px] text-left">
                       {name}
                     </div>
                   </TooltipTrigger>
@@ -46,7 +46,7 @@ export const StatsCard = ({
               {secondaryId && (
                 <Tooltip>
                   <TooltipTrigger>
-                    <div className="text-left text-accent-11 text-xxs overflow-hidden text-ellipsis max-w-full w-[200px]">
+                    <div className="text-left text-accent-11 text-xxs overflow-hidden text-ellipsis w-[240px] md:w-[300px]">
                       {secondaryId}
                     </div>
                   </TooltipTrigger>
@@ -56,10 +56,9 @@ export const StatsCard = ({
                 </Tooltip>
               )}
             </div>
-            {rightContent && <div className="flex-shrink-0 ml-auto">{rightContent}</div>}
+            {rightContent && <div className="flex-shrink-0">{rightContent}</div>}
           </div>
-
-          <div className="flex items-center w-full justify-between gap-3 md:gap-4 mt-2 flex-wrap">
+          <div className="flex items-center w-full justify-between gap-3 md:gap-4 mt-2">
             {stats}
           </div>
         </div>

From 9fe134b27e52528582872a0dcdd05dcd400a1c92 Mon Sep 17 00:00:00 2001
From: ogzhanolguncu <ogzhan11@gmail.com>
Date: Mon, 3 Mar 2025 21:17:22 +0300
Subject: [PATCH 2/3] refactor: apply same grid structure to ratelimits page

---
 .../ratelimits/_components/ratelimit-client.tsx      | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx b/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx
index f9fa1598c4..0b97351f97 100644
--- a/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx
@@ -37,7 +37,7 @@ export const RatelimitClient = ({
       <RatelimitListControlCloud />
 
       {namespaces.length > 0 ? (
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 md:gap-5 w-full p-5">
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 md:gap-5 w-full p-5">
           {namespaces.map((namespace) => (
             <NamespaceCard namespace={namespace} key={namespace.id} />
           ))}
@@ -48,8 +48,8 @@ export const RatelimitClient = ({
             <Empty.Icon />
             <Empty.Title>No Namespaces found</Empty.Title>
             <Empty.Description>
-              You haven't created any Namespaces yet. Create one by performing a limit request as
-              shown below.
+              You haven't created any Namespaces yet. Create one by performing a
+              limit request as shown below.
             </Empty.Description>
 
             <div className="w-full mt-8 mb-8">
@@ -62,7 +62,11 @@ export const RatelimitClient = ({
             </div>
 
             <Empty.Actions>
-              <a href="/docs/ratelimiting/introduction" target="_blank" rel="noopener noreferrer">
+              <a
+                href="/docs/ratelimiting/introduction"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <Button className="flex items-center w-full gap-2">
                   <BookOpen className="w-4 h-4" />
                   Read the docs

From ef03bef298501cde3bd44417d3b0406c9a034a49 Mon Sep 17 00:00:00 2001
From: ogzhanolguncu <ogzhan11@gmail.com>
Date: Mon, 3 Mar 2025 21:23:05 +0300
Subject: [PATCH 3/3] chore: fmt

---
 .../(app)/ratelimits/_components/ratelimit-client.tsx  | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx b/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx
index 0b97351f97..775ee2b6f1 100644
--- a/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx
@@ -48,8 +48,8 @@ export const RatelimitClient = ({
             <Empty.Icon />
             <Empty.Title>No Namespaces found</Empty.Title>
             <Empty.Description>
-              You haven't created any Namespaces yet. Create one by performing a
-              limit request as shown below.
+              You haven't created any Namespaces yet. Create one by performing a limit request as
+              shown below.
             </Empty.Description>
 
             <div className="w-full mt-8 mb-8">
@@ -62,11 +62,7 @@ export const RatelimitClient = ({
             </div>
 
             <Empty.Actions>
-              <a
-                href="/docs/ratelimiting/introduction"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a href="/docs/ratelimiting/introduction" target="_blank" rel="noopener noreferrer">
                 <Button className="flex items-center w-full gap-2">
                   <BookOpen className="w-4 h-4" />
                   Read the docs