mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Alaister YoungandAlaister Young
293eef83e6
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 --> [](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>
