fix: improve user table hover & selected styles (#195)

Author: satnaing

src/features/users/components/data-table-column-header.tsx

@@ -37,7 +37,7 @@ export function DataTableColumnHeader<TData, TValue>({
           <Button
             variant='ghost'
             size='sm'
-            className='data-[state=open]:bg-accent -ms-3 h-8'
+            className='data-[state=open]:bg-accent h-8'
           >
             <span>{title}</span>
             {column.getIsSorted() === 'desc' ? (

src/features/users/components/users-columns.tsx

@@ -23,10 +23,7 @@ export const columns: ColumnDef<User>[] = [
       />
     ),
     meta: {
-      className: cn(
-        'sticky md:table-cell start-0 z-10 rounded-tl',
-        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted'
-      ),
+      className: cn('sticky md:table-cell start-0 z-10 rounded-tl-[inherit]'),
     },
     cell: ({ row }) => (
       <Checkbox
@@ -45,13 +42,12 @@ export const columns: ColumnDef<User>[] = [
       <DataTableColumnHeader column={column} title='Username' />
     ),
     cell: ({ row }) => (
-      <LongText className='max-w-36'>{row.getValue('username')}</LongText>
+      <LongText className='max-w-36 ps-3'>{row.getValue('username')}</LongText>
     ),
     meta: {
       className: cn(
-        'drop-shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:drop-shadow-[0_1px_2px_rgb(255_255_255_/_0.1)] lg:drop-shadow-none',
-        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted',
-        'sticky start-6 md:table-cell'
+        'drop-shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:drop-shadow-[0_1px_2px_rgb(255_255_255_/_0.1)]',
+        'sticky start-6 @4xl/content:table-cell @4xl/content:drop-shadow-none'
       ),
     },
     enableHiding: false,

src/features/users/components/users-table.tsx

@@ -14,6 +14,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table'
+import { cn } from '@/lib/utils'
 import {
   Table,
   TableBody,
@@ -79,7 +80,10 @@ export function UsersTable({ columns, data }: DataTableProps) {
                     <TableHead
                       key={header.id}
                       colSpan={header.colSpan}
-                      className={header.column.columnDef.meta?.className ?? ''}
+                      className={cn(
+                        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted',
+                        header.column.columnDef.meta?.className ?? ''
+                      )}
                     >
                       {header.isPlaceholder
                         ? null
@@ -104,7 +108,10 @@ export function UsersTable({ columns, data }: DataTableProps) {
                   {row.getVisibleCells().map((cell) => (
                     <TableCell
                       key={cell.id}
-                      className={cell.column.columnDef.meta?.className ?? ''}
+                      className={cn(
+                        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted',
+                        cell.column.columnDef.meta?.className ?? ''
+                      )}
                     >
                       {flexRender(
                         cell.column.columnDef.cell,