mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
Alaister YoungandAlaister Young
446398bd28
Follow-up to #46448, which removed the doubled DataGrid borders across Studio. The table editor grid had the same doubled border at the bottom, but unlike the other grids it still needs a top border — and that top border was rendering in react-data-grid's own `--rdg-border-color` rather than the studio default. **Changed:** - Removed the doubled bottom border on the table editor `<DataGrid>` (`border-b-0!`) - Forced the top border to the default border color via the `border-t-default!` token (≈ rgb(46,46,46) / `--border-default`) instead of leaning on react-data-grid's `--rdg-border-color` ## To test - Open the table editor for any table (`/project/[ref]/editor/[id]`) - Confirm there's a single top border between the filter/sort toolbar and the grid header, in the standard border color - Confirm there's no extra line at the bottom of the grid <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined grid visuals and spacing to improve alignment and visual consistency across the app. Adjustments to border and growth behavior reduce border inconsistencies and layout jitter during resizing. Context menu display behavior remains intact, ensuring expected right-click interactions continue to work smoothly for users. <!-- 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