PublicArchive/supabase
2
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-05-06 08:56:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: table hover styles are incorrect (#45512)

Browse Source 
## Problem

When migrating to tailwind v4, we introduced a regression on table
styles when hovering a row:
<img width="1190" height="131" alt="image"
src="https://github.com/user-attachments/assets/b84b8968-fa23-42bd-ad84-091fe7ff8d73"
/>

## Solution

Fix the styles:
<img width="1200" height="126" alt="image"
src="https://github.com/user-attachments/assets/df99d215-4fcb-4437-804d-0fc784cd8aaf"
/>


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

## Summary by CodeRabbit

* **Style**
* Enhanced table row and cell styling to improve hover effects and
selection state visual feedback, providing clearer and more consistent
interactions when working with tabular data.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Gildas Garcia
2026-05-05 02:30:41 +02:00
committed by GitHub
parent ee5d4a9314
commit 77140cae32
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/shadcn/ui/table.tsx
+5 -5
View File
@@ -52,10 +52,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
({ className, ...props }, ref) => (
<tr
ref={ref}
className={cn(
'border-b [&>td]:hover:bg-surface-200 data-[state=selected]:bg-muted',
className
)}
className={cn('border-b group data-[state=selected]:bg-muted', className)}
{...props}
/>
)
@@ -151,7 +148,10 @@ const TableCell = React.forwardRef<
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn('transition-colors p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
className={cn(
'transition-colors p-4 align-middle group-hover:bg-surface-200 [&:has([role=checkbox])]:pr-0',
className
)}
{...props}
/>
))