mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
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 --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45915) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
1 parent
59c550ac49
commit
8ee2f90d65
1 file changed
+4
-2
@@ -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:
|
||||
|
||||
Reference in new issue
Block a user