fix: compute badge sizes on project cards

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 && (

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

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