mirror of
https://github.com/supabase/supabase.git
synced 2026-05-07 01:10:15 -04:00
Danny White
c05083aa80
## What kind of change does this PR introduce? UI styling consistency for table grid frozen-column borders ## What is the current behavior? The custom style targeted a non-existent React Data Grid class (`.rdg-cell-frozen-last`), so the frozen column divider was not visible. ## What is the new behavior? - Frozen-column divider now targets the actual rendered structure: - body: `.rdg-row .rdg-cell-frozen:nth-last-child(1 of .rdg-cell-frozen)` - header: `.rdg-header-row .rdg-cell-frozen:nth-last-child(1 of .rdg-cell-frozen)` - Header bottom border remains consistent on the last frozen column. - Dark mode now applies a balanced divider contrast using `border-r-strong` for the last frozen divider (header + body), avoiding both faint and overly harsh appearance. | Before | After | | --- | --- | | <img width="1167" height="690" alt="colors Table Editor Chisel Toolshed Supabase-A1CB0078-936B-4213-B931-B2D23C5FCCA9" src="https://github.com/user-attachments/assets/1f2c89c0-55d0-4fc9-9d9a-c66cda66ec4b" /> | <img width="1167" height="690" alt="colors Table Editor Chisel Toolshed Supabase-4E3F8C10-0E40-4035-8D5F-1BCDD0AF75D3" src="https://github.com/user-attachments/assets/55a3053b-c30b-441b-a3f2-98bc403fdf27" /> | | <img width="1167" height="690" alt="colors Table Editor Chisel Toolshed Supabase-7BFFFBC0-8F9A-4895-B141-275AFF206CAB" src="https://github.com/user-attachments/assets/faa50426-7547-4986-bf25-5c1c39199b72" /> | <img width="1167" height="690" alt="colors Table Editor Chisel Toolshed Supabase-C179A558-89BA-4913-993B-1C7DFDBC5299" src="https://github.com/user-attachments/assets/a6f8bf17-b061-4079-b471-ad26be277470" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Enhanced the visual appearance of frozen grid columns with refined border styling for the last frozen column, ensuring improved consistency across both light and dark themes. * Optimized frozen column header and cell styling for better visual presentation across all color schemes, delivering a more polished and cohesive user interface experience. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Styles
When to write custom styles
Tailwind should be sufficient to cover the majority of styling needs. We typically only write custom styles here in the event where we're working with an external library and we need to override some styles (e.g Monaco, or even our own UI library).
Ideally, keep custom styling here to a minimum, use tailwind directly in the pages and components where possible, so that we have less code to maintain.
If you're writing custom styles
Group custom styles into separate stylesheets based on their context. For styles which are generic and global, we can write them in main.scss.