From ee6bacdbde997da41edf97517adfb0042e976325 Mon Sep 17 00:00:00 2001
From: kemal <hello@kemal.earth>
Date: Wed, 18 Mar 2026 14:08:49 +0000
Subject: [PATCH] fix: compute badge sizes on project cards

---
 .../components/interfaces/Home/ProjectList/ProjectCard.tsx    | 3 ++-
 apps/studio/components/ui/ComputeBadgeWrapper.tsx             | 4 +++-
 packages/ui-patterns/src/ComputeBadge/index.tsx               | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index b75ce7f895b..f9fc5be5888 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -114,7 +114,7 @@ export const ProjectCard = ({
                 </div>
                 <p className="text-sm text-foreground-lighter">{desc}</p>
               </div>
-              <div className="flex items-center gap-x-1.5 relative overflow-hidden">
+              <div className="flex items-center gap-x-1.5 relative overflow-hidden py-px">
                 <ProjectCardStatus
                   projectStatus={projectStatus}
                   resourceWarnings={resourceWarnings}
@@ -126,6 +126,7 @@ export const ProjectCard = ({
                     projectRef={project.ref}
                     cloudProvider={project.cloud_provider}
                     computeSize={getComputeSize(project)}
+                    badgeClassName="text-[10px] leading-none tracking-[0.07em]"
                   />
                 )}
                 {isVercelIntegrated && (
diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx
index a22babc88a1..33ed0a5c6b8 100644
--- a/apps/studio/components/ui/ComputeBadgeWrapper.tsx
+++ b/apps/studio/components/ui/ComputeBadgeWrapper.tsx
@@ -26,6 +26,7 @@ interface ComputeBadgeWrapperProps {
   projectRef?: string
   cloudProvider?: string
   computeSize?: ProjectDetail['infra_compute_size']
+  badgeClassName?: string
 }
 
 export const ComputeBadgeWrapper = ({
@@ -33,6 +34,7 @@ export const ComputeBadgeWrapper = ({
   projectRef,
   cloudProvider,
   computeSize,
+  badgeClassName,
 }: ComputeBadgeWrapperProps) => {
   // handles the state of the hover card
   // once open it will fetch the addons
@@ -80,7 +82,7 @@ export const ComputeBadgeWrapper = ({
     <HoverCard onOpenChange={() => setOpenState(!open)} openDelay={280}>
       <HoverCardTrigger asChild className="group" onClick={(e) => e.stopPropagation()}>
         <div className="flex items-center">
-          <ComputeBadge infraComputeSize={computeSize} />
+          <ComputeBadge infraComputeSize={computeSize} className={badgeClassName} />
         </div>
       </HoverCardTrigger>
       <HoverCardContent
diff --git a/packages/ui-patterns/src/ComputeBadge/index.tsx b/packages/ui-patterns/src/ComputeBadge/index.tsx
index bb25feb2eca..720b55ccebb 100644
--- a/packages/ui-patterns/src/ComputeBadge/index.tsx
+++ b/packages/ui-patterns/src/ComputeBadge/index.tsx
@@ -20,7 +20,7 @@ export function ComputeBadge({ infraComputeSize, className, ...props }: ComputeB
     <div
       className={cn(
         // Base styles
-        'inline-flex items-center justify-center rounded-md text-center font-mono uppercase',
+        'inline-flex items-center justify-center rounded text-center font-mono uppercase',
         'whitespace-nowrap font-medium tracking-[0.06em] text-[11px] leading-[1.1] px-[5.5px] py-[3px]',
         'transition-all',
         // Variant styles