mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
Jordi EnricandClaude Sonnet 4.6
c3af2858bd
## Problem The Compute and Disk settings page shows all 12+ instance sizes (Nano through >16XL) in a grid, which requires scrolling on smaller screens like a 13" MacBook. This makes it impossible to see all three sections (compute size, disk size, advanced settings) in a single view. Free tier users have no need to see 8XL, 12XL, or 16XL options. ## Fix Show only the first 6 compute sizes (Nano through XL) by default, cutting the grid from 4 rows to 2 rows. Larger sizes (2XL and above, plus the >16XL contact card) are revealed via a "Show all sizes" toggle button below the grid. The grid auto-expands if the project is already running on a large instance size so the selected option is always visible. ## How to test - Go to Settings > Compute and Disk on a project - Verify only 6 cards are visible by default (Nano, Micro, Small, Medium, Large, XL) - Verify the Disk size and Advanced settings sections are visible without scrolling on a 13" screen - Click "Show all sizes" and verify the remaining sizes appear (2XL through 16XL plus the >16XL contact card) - Click "Show fewer sizes" and verify the grid collapses back to 6 cards - On a project running 4XL or larger, verify the grid opens expanded by default so the selected card is visible <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Compute size options now display in a compact view with a toggle to expand and show all available sizes * Auto-expands to reveal the currently selected compute size when it's not visible in the initial view * Enhanced loading state for improved visual clarity <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.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