From d7ad603e402ed349c2d1481643b03283b60492fa Mon Sep 17 00:00:00 2001
From: David_C <110653663+YuDavidCao@users.noreply.github.com>
Date: Mon, 6 Jul 2026 06:31:54 -0700
Subject: [PATCH] fix(studio): fixing table editor column header background
 (#47585)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 apps/studio/styles/grid.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/studio/styles/grid.css b/apps/studio/styles/grid.css
index 77b3f2fb20e..ba38d053d2b 100644
--- a/apps/studio/styles/grid.css
+++ b/apps/studio/styles/grid.css
@@ -124,7 +124,7 @@
 */
 
 .rdg-header-row {
-  @apply bg-surface-200 select-none border-none;
+  @apply select-none border-none;
 }
 
 .rdg-header-row {
@@ -134,7 +134,7 @@
 }
 
 .rdg-header-row .rdg-cell {
-  @apply bg-surface-200 border-default border-b;
+  @apply bg-dash-canvas border-default border-b;
 }
 
 .rdg-header-row .rdg-cell-frozen:nth-last-child(1 of .rdg-cell-frozen) {