From 8ee2f90d65da4b85934d7d2adaeb049082299fa0 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 14 May 2026 20:35:47 +0800
Subject: [PATCH] Target hover background color change for unified log rows to
 the cell (#45915)

## Context

The `TableCell` component from `ui` has a `group-hover:bg-surface-200`
class name
([ref](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/shadcn/ui/table.tsx#L152)),
hence the original class names in `UnifiedLog.utils.ts` which targets
only the table row's background color on hover doesn't work.

Hence fix is to target the `td` element on row hover to apply the
background color change

Although separately, i'm wondering whether it makes more sense for the
hover bg color change to be applied on the `tr` instead of `td`

### Before
<img width="1182" height="61" alt="image"
src="https://github.com/user-attachments/assets/78939525-7832-4c4f-8985-e856715a731b"
/>

### After
<img width="1211" height="79" alt="image"
src="https://github.com/user-attachments/assets/5726063d-d06a-439c-90d8-a27407a94a05"
/>


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

## Summary by CodeRabbit

* **Style**
* Enhanced hover interactions for warning and error log rows with
improved dark mode styling 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/45915)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
index bf9f0455b91..b839237a946 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
@@ -81,12 +81,14 @@ export function getLevelRowClassName(value: (typeof LEVELS)[number]): string {
       return ''
     case 'warning':
       return cn(
-        'bg-warning/5 hover:bg-warning/10 data-[state=selected]:bg-warning/20 focus-visible:bg-warning/10',
+        'bg-warning/5 [&>td]:group-hover:bg-warning/10',
+        'data-[state=selected]:bg-warning/20 focus-visible:bg-warning/10',
         'dark:bg-warning/10 dark:hover:bg-warning/20 dark:data-[state=selected]:bg-warning/30 dark:focus-visible:bg-warning/20'
       )
     case 'error':
       return cn(
-        'bg-destructive/5 hover:bg-destructive/10 data-[state=selected]:bg-destructive/20 focus-visible:bg-destructive/10',
+        'bg-destructive/5 [&>td]:group-hover:bg-destructive/10',
+        'data-[state=selected]:bg-destructive/20 focus-visible:bg-destructive/10',
         'dark:bg-error/10 dark:hover:bg-destructive/20 dark:data-[state=selected]:bg-destructive/30 dark:focus-visible:bg-destructive/20'
       )
     default: