fix(studio): remove default DataGrid borders across studio surfaces (#46448)

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>

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}

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}

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}

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}

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}

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}

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}

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}

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}

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

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,
               })}