M: Improve table styling

rsconcept/frontend/src/components/data-table/data-table.tsx

@@ -10,6 +10,7 @@ import {
   type TableOptions,
   type VisibilityState
 } from '@tanstack/react-table';
+import clsx from 'clsx';
 
 import { type Styling } from '../props';
 
@@ -152,7 +153,12 @@ export function DataTable<TData extends RowData>({
   }, [table]);
 
   return (
-    <div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
+    <div
+      tabIndex={-1}
+      id={id}
+      className={clsx('table-auto', className)}
+      style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}
+    >
       <table className='w-full' style={{ ...columnSizeVars }}>
         {!noHeader ? (
           <TableHeader table={table} headPosition={headPosition} resetLastSelected={() => setLastSelected(null)} />

rsconcept/frontend/src/components/data-table/sorting-icon.tsx

@@ -11,5 +11,5 @@ export function SortingIcon({ sortDirection }: SortingIconProps) {
   if (sortDirection === 'desc') {
     return <IconSortDesc size='1rem' />;
   }
-  return <IconSortDesc size='1rem' className='opacity-0 group-hover:opacity-25' />;
+  return <IconSortDesc size='1rem' className='opacity-0 group-hover:opacity-25 transition-opacity' />;
 }

rsconcept/frontend/src/components/data-table/table-body.tsx

@@ -98,7 +98,7 @@ export function TableBody<TData>({
                 cursor: onRowClicked || onRowDoubleClicked ? 'pointer' : 'auto',
                 paddingBottom: dense ? '0.25rem' : '0.5rem',
                 paddingTop: dense ? '0.25rem' : '0.5rem',
-                width: noHeader && index === 0 ? `calc(var(--col-${cell.column.id}-size) * 1px)` : 'auto'
+                width: noHeader && index === 0 ? `calc(var(--col-${cell.column.id}-size) * 1px)` : undefined
               }}
             >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}