From b0d023bd04e741ebd6f45a36b14787baa62efe3f Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Thu, 28 May 2026 16:01:43 +0800
Subject: [PATCH] fix(studio): remove default DataGrid borders across studio
 surfaces (#46448)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to #46413, which fixed an unwanted top border on the Auth
Users grid by upgrading `border-t-0` → `border-t-0!` so the Tailwind
rule actually wins over react-data-grid's `.rdg { border: 1px solid
var(--rdg-border-color); }` shorthand. The same issue exists on every
other DataGrid in Studio — this applies the fix consistently.

**Changed:**
- `border-t-0! border-b-0!` applied to all `<DataGrid>` call sites in
Studio (11 in total)

Fixes this issue everywhere:
<img width="609" height="223" alt="Screenshot 2026-05-28 at 3 40 02 PM"
src="https://github.com/user-attachments/assets/f49d8849-dd58-4675-ade4-a2656aadb8f9"
/>

## To test

Spot-check that the top/bottom borders look right (no doubled border
under the page chrome, no extra line at the bottom of the table) on each
route below. Use any project ref for `[ref]`:

- `/project/[ref]/observability/query-performance` — main grid + the
WithStatements grid inside
- `/project/[ref]/observability/query-insights` — both modes (explorer +
triage)
- `/project/[ref]/advisors/security`
- `/project/[ref]/advisors/performance`
- `/project/[ref]/integrations/cron/jobs` — jobs list
- `/project/[ref]/integrations/cron/jobs/<jobName>` — previous runs tab
- `/project/[ref]/integrations/queues/queues` — queues list
- `/project/[ref]/integrations/queues/queues/<queueName>` — single queue
messages
- `/project/[ref]/integrations/vault/secrets`
- `/project/[ref]/sql/new` — results pane at the bottom
- `/project/[ref]/realtime/inspector`
- `/project/[ref]/logs/explorer` — and the preview pages: `auth-logs`,
`edge-logs`, `postgres-logs`, `cron-logs`, `pg-upgrade-logs`,
`postgrest-logs`, `realtime-logs`, `replication-logs`, `pgcron-logs`,
`storage-logs`, `edge-functions-logs`, `pooler-logs`,
`dedicated-pooler-logs`
- `/project/[ref]/functions/[functionSlug]/logs` and `/invocations`

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

## Summary by CodeRabbit

* **Style**
* Refined border styling on data grids across multiple features
including integrations, query tools, and logs for improved visual
consistency.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46448?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
 .../Integrations/CronJobs/CronJobsTab.DataGrid.tsx           | 2 +-
 .../interfaces/Integrations/CronJobs/PreviousRunsTab.tsx     | 2 +-
 .../components/interfaces/Integrations/Queues/QueuesTab.tsx  | 2 +-
 .../Integrations/Queues/SingleQueue/QueueDataGrid.tsx        | 2 +-
 .../Integrations/Vault/Secrets/SecretsManagement.tsx         | 2 +-
 apps/studio/components/interfaces/Linter/LinterDataGrid.tsx  | 2 +-
 .../QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx  | 5 ++---
 .../interfaces/QueryPerformance/QueryPerformanceGrid.tsx     | 2 +-
 .../interfaces/Realtime/Inspector/MessagesTable.tsx          | 2 +-
 .../components/interfaces/SQLEditor/UtilityPanel/Results.tsx | 2 +-
 apps/studio/components/interfaces/Settings/Logs/LogTable.tsx | 2 +-
 11 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx
index 0b37422e905..d5d3c468247 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx
@@ -51,7 +51,7 @@ export const CronJobsTabDataGrid = ({
 
   return (
     <DataGrid
-      className="grow border-t-0"
+      className="grow border-t-0! border-b-0!"
       rowHeight={44}
       headerRowHeight={36}
       columns={columns}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
index d72f87ff8b2..54ebfc7e798 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
@@ -183,7 +183,7 @@ export const PreviousRunsTab = () => {
     <div className="h-full flex flex-col">
       <LoadingLine loading={isFetching} />
       <DataGrid
-        className="grow border-t-0"
+        className="grow border-t-0! border-b-0!"
         rowHeight={44}
         headerRowHeight={36}
         onScroll={handleScroll}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
index 802d7dd2f1f..c2da5eb8660 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
@@ -124,7 +124,7 @@ export const QueuesTab = () => {
           <LoadingLine loading={isLoading || isRefetching} />
 
           <DataGrid
-            className="grow border-t-0"
+            className="grow border-t-0! border-b-0!"
             rowHeight={44}
             headerRowHeight={36}
             columns={columns}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
index 0a14db6d9fb..479fc99cc89 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
@@ -154,7 +154,7 @@ export const QueueMessagesDataGrid = ({
     <div className="relative h-full">
       <DataGrid
         ref={gridRef}
-        className="h-full"
+        className="h-full border-t-0! border-b-0!"
         rowHeight={44}
         headerRowHeight={36}
         columns={columns}
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
index 2d0b9b96347..986dcf9f02b 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
@@ -179,7 +179,7 @@ export const SecretsManagement = () => {
             </div>
           ) : (
             <DataGrid
-              className="grow border-t-0"
+              className="grow border-t-0! border-b-0!"
               rowHeight={52}
               headerRowHeight={36}
               columns={columns}
diff --git a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
index 53d36a44a0b..ac576fa1e24 100644
--- a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
@@ -131,7 +131,7 @@ export const LinterDataGrid = ({
         <DataGrid
           ref={gridRef}
           style={{ height: '100%' }}
-          className={cn('flex-1 grow h-full')}
+          className={cn('flex-1 grow h-full border-t-0! border-b-0!')}
           rowHeight={44}
           headerRowHeight={36}
           columns={columns}
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx
index 33b098a2525..d4868800048 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx
@@ -5,7 +5,6 @@ import { Search, TextSearch, X } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-// eslint-disable-next-line no-restricted-imports
 import DataGrid, { DataGridHandle, Row } from 'react-data-grid'
 import { Button, cn, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
@@ -453,7 +452,7 @@ export const QueryInsightsTable = ({
             <DataGrid
               ref={triageGridRef}
               style={{ height: '100%' }}
-              className="flex-1 grow h-full"
+              className="flex-1 grow h-full border-t-0! border-b-0!"
               rowHeight={60}
               headerRowHeight={36}
               columns={triageColumns}
@@ -509,7 +508,7 @@ export const QueryInsightsTable = ({
             <DataGrid
               ref={gridRef}
               style={{ height: '100%' }}
-              className={cn('flex-1 grow h-full')}
+              className={cn('flex-1 grow h-full border-t-0! border-b-0!')}
               rowHeight={44}
               headerRowHeight={36}
               columns={columns}
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
index 5bfb6e69c73..21dadf5fead 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
@@ -509,7 +509,7 @@ export const QueryPerformanceGrid = ({
         <DataGrid
           ref={gridRef}
           style={{ height: '100%' }}
-          className={cn('flex-1 grow h-full')}
+          className={cn('flex-1 grow h-full border-t-0! border-b-0!')}
           rowHeight={44}
           headerRowHeight={36}
           columns={columns}
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
index 35376f9e297..5a6ab9c754a 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
@@ -191,7 +191,7 @@ const MessagesTable = ({
             )}
 
             <DataGrid
-              className="data-grid--simple-logs h-full border-b-0"
+              className="data-grid--simple-logs h-full border-t-0! border-b-0!"
               rowHeight={40}
               headerRowHeight={0}
               columns={ColumnRenderer}
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
index 1fda67ce9d4..9e42185427c 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
@@ -127,7 +127,7 @@ export const Results = ({ rows }: { rows: readonly any[] }) => {
           <DataGrid
             columns={columns}
             rows={rows}
-            className="grow min-h-0 border-t-0"
+            className="grow min-h-0 border-t-0! border-b-0!"
             rowClass={() => '[&>.rdg-cell]:items-center'}
             onCellKeyDown={handleCellKeyDown}
           />
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
index 75520609002..d09662119bf 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -600,7 +600,7 @@ export const LogTable = ({
             <DataGrid
               role="table"
               style={{ flex: '1 1 0%', minHeight: 0 }}
-              className={cn('border-0', {
+              className={cn('border-t-0! border-b-0!', {
                 'data-grid--simple-logs': queryType,
                 'data-grid--logs-explorer': !queryType,
               })}