mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +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>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA