From 7e717fb7bc5d9ffaf0922d4a3d5279f35dda58cd Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Wed, 20 May 2026 14:42:16 +0100
Subject: [PATCH] fix(studio): selected status bg colour unified logs (#46152)

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

Small visual gremlin where the status dot was blending in with the
selected state background colour. See image below.

Appreciate there's probably another PR to go in with the row select
before this goes in.

| Before | After |
|--------|--------|
| <img width="97" height="84" alt="Screenshot 2026-05-20 at 09 34 10"
src="https://github.com/user-attachments/assets/7f21d415-e551-4686-a7e8-a6c7260ecab3"
/> | <img width="173" height="67" alt="Screenshot 2026-05-20 at 12 51
14"
src="https://github.com/user-attachments/assets/439b4c73-bd82-4bca-9d93-69c833da60bc"
/> |




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

* **Style**
* Updated visual styling for successful rows in data tables to use the
selected-row variant, improving highlight consistency for
selected/successful rows.

* **Refactor**
* Standardized row class composition so each table row reliably includes
the base row grouping class alongside any custom row classes from table
metadata, reducing UI regressions and improving 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/46152?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: Joshen Lim <joshenlimek@gmail.com>
---
 apps/studio/components/ui/DataTable/DataTable.utils.ts    | 4 ++--
 apps/studio/components/ui/DataTable/DataTableInfinite.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/ui/DataTable/DataTable.utils.ts b/apps/studio/components/ui/DataTable/DataTable.utils.ts
index 5443a55599a..d206a302dd8 100644
--- a/apps/studio/components/ui/DataTable/DataTable.utils.ts
+++ b/apps/studio/components/ui/DataTable/DataTable.utils.ts
@@ -63,8 +63,8 @@ export function getLevelColor(
     case 'success':
       return {
         text: 'text-muted',
-        bg: 'bg-muted',
-        border: 'border-muted',
+        bg: 'bg-muted group-data-[state=selected]/row:bg-foreground-lighter',
+        border: 'border-muted group-data-[state=selected]/row:border-foreground-lighter',
       }
     case 'warning':
       return {
diff --git a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
index 221466617b0..2656050405f 100644
--- a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
@@ -239,7 +239,7 @@ function DataTableRow<TData>({
   onSelect: () => void
 }) {
   useQueryState('live', searchParamsParser.live)
-  const rowClassName = (table.options.meta as any)?.getRowClassName?.(row)
+  const rowClassName = cn('group/row', (table.options.meta as any)?.getRowClassName?.(row))
   const cells = row.getVisibleCells()
 
   return (