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>
This commit is contained in:
kemal.earthandJoshen Lim authored and GitHub committed 2026-05-20 20:42:16 +07:00
1 parent 84484be46d
commit 7e717fb7bc
2 files changed
+3 -3

No files matched your search

@@ -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 {
@@ -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 (