From 293eef83e69457f115ea0710d466bf232c9bea01 Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Tue, 26 May 2026 18:42:25 +0700
Subject: [PATCH] [FE-3408] fix(studio): allow project overview stat values to
 grow vertically (#46370)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Compute card's "High Availability" badge was overflowing the cell
horizontally in 2-column layouts and bleeding vertically into adjacent
cards when the badges wrapped onto a second line in narrow/vertical
layouts.

Root cause was in `SingleStat`: the value row used `h-[34px]` +
`truncate` (overflow: hidden), so the inner `flex-wrap` couldn't grow
the row, and the flex column lacked `min-w-0` so it couldn't shrink to
its grid track.

**Changed:**
- `SingleStat` outer flex gets `min-w-0` so the grid item is constrained
by its track
- Right column swapped from `truncate` to `min-w-0 flex-1` (takes
remaining space, can shrink)
- Value row swapped from `h-[34px]` to `min-h-[34px]` with `py-0.5` —
keeps the 34px baseline for single-line text values, but lets the row
grow when badges wrap

Closes [FE-3408](https://linear.app/supabase/issue/FE-3408)

## To test

- Open the project overview on a project with `high_availability`
enabled
- At 2-column widths: the "HIGH AVAILABILITY" badge should sit fully
inside the Compute card alongside the compute size badge — no clipping
at the right edge
- At narrow / 1-column widths: when the two badges need to wrap, the
Compute card should grow vertically rather than letting the second-line
badge overlap the cards above/below
- Spot check the other stat cards (GitHub, Recent branch, Last
migration, Last backup) — long text values should still truncate with an
ellipsis as before

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Updated stat card layout and inner spacing to improve responsiveness
and prevent overflow.
* Improved text truncation and minimum-width behavior for stat values
and labels.
* Standardized spacing, truncation and color handling across activity
stats for more consistent display.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46370?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
 .../interfaces/ProjectHome/ActivityStats.tsx     | 16 +++++++++++-----
 apps/studio/components/ui/SingleStat.tsx         |  8 +++++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx b/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
index f2308ef0ddb..a3da7867b7a 100644
--- a/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
@@ -97,7 +97,7 @@ export const ActivityStats = () => {
           icon={<Cpu size={18} strokeWidth={1.5} className="text-foreground" />}
           label={<span>Compute</span>}
           value={
-            <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-x-2 gap-y-1 flex-wrap">
               {project?.infra_compute_size ? (
                 <ComputeBadgeWrapper
                   projectRef={project?.ref}
@@ -123,7 +123,7 @@ export const ActivityStats = () => {
               <Skeleton className="h-6 w-24" />
             ) : (
               <p
-                className={cn('truncate', !githubConnection && 'text-foreground-lighter')}
+                className={cn('truncate min-w-0', !githubConnection && 'text-foreground-lighter')}
                 title={githubLabelText}
               >
                 {githubLabelText}
@@ -146,8 +146,8 @@ export const ActivityStats = () => {
             ) : isDefaultProject ? (
               <p
                 className={cn(
-                  'truncate',
-                  !latestNonDefaultBranch && 'text-foreground-lighter truncate'
+                  'truncate min-w-0',
+                  !latestNonDefaultBranch && 'text-foreground-lighter'
                 )}
                 title={latestNonDefaultBranch?.name ?? 'No branches'}
               >
@@ -177,7 +177,13 @@ export const ActivityStats = () => {
             isLoadingMigrations ? (
               <Skeleton className="h-6 w-24" />
             ) : (
-              <p className={!!latestMigration ? 'text-foreground' : 'text-foreground-lighter'}>
+              <p
+                className={cn(
+                  'truncate min-w-0',
+                  !!latestMigration ? 'text-foreground' : 'text-foreground-lighter'
+                )}
+                title={migrationLabelText}
+              >
                 {migrationLabelText}
               </p>
             )
diff --git a/apps/studio/components/ui/SingleStat.tsx b/apps/studio/components/ui/SingleStat.tsx
index 1a4775f4487..8ecb8a28eec 100644
--- a/apps/studio/components/ui/SingleStat.tsx
+++ b/apps/studio/components/ui/SingleStat.tsx
@@ -45,13 +45,15 @@ export const SingleStat = ({
     }
   }
   const content = (
-    <div className={cn('group flex items-center gap-4 p-0 text-base justify-start', className)}>
+    <div
+      className={cn('group flex items-center gap-4 p-0 text-base justify-start min-w-0', className)}
+    >
       <div className="min-w-16 w-16 h-16 rounded-md bg-surface-75 group-hover:bg-muted border flex items-center justify-center">
         {icon}
       </div>
-      <div className="truncate">
+      <div className="min-w-0 flex-1">
         <div className="text-left heading-meta text-foreground-light">{label}</div>
-        <div className="text-foreground truncate h-[34px] flex items-center capitalize-sentence">
+        <div className="text-foreground min-h-[34px] flex items-center capitalize-sentence py-0.5">
           {value}
         </div>
       </div>