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 -->

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) {