Files
supabase/apps/studio/styles
David_C d7ad603e40 fix(studio): fixing table editor column header background (#47585)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix (Fixes #47562)

## What is the current behavior?

Header and data row overlaps:
<img width="1416" height="58" alt="Screenshot 2026-07-03 at 12 39 43 PM"
src="https://github.com/user-attachments/assets/fd5ab174-f18d-4f84-9158-5824f43d5ab5"
/>

## What is the new behavior?

Now it correctly displays entry data without overlapping text:
<img width="1289" height="115" alt="Screenshot 2026-07-03 at 12 38
38 PM"
src="https://github.com/user-attachments/assets/df0d96d6-1091-4be9-be44-cad317b87847"
/>

## Additional context

Colors are consistent with surrounding for all color theme.

This issue appeared after PR #47288, I am not exactly sure about the
whole situation as 47288 is a massive PR. I drilled in a bit into the
CSS with the help of my cursor agent, it mentioned css conflicts with
react-data-grid's background-color: inherit, take it with a grain of
salt though.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
  * Updated the grid header appearance to better match the app canvas.
* Header rows now keep their existing behavior and borders, while header
cells use the canvas background for a cleaner look.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-06 13:31:54 +00:00
..
2026-06-30 18:06:38 +02:00
2026-07-01 13:11:46 +02:00
2026-07-03 21:40:51 +10:00
2026-07-03 15:00:43 +10:00
2026-07-03 15:00:43 +10:00
2026-06-30 18:06:38 +02:00
2026-07-03 15:00:43 +10:00

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.