multiple breakpoints

apps/dashboard/src/components/ui/table.tsx

@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'bg-def-200 h-10 border-b border-border px-4 text-left align-middle text-sm font-medium text-muted-foreground shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
+      'h-10 border-b border-border bg-def-200 px-4 text-left align-middle text-sm font-medium text-muted-foreground shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
       className
     )}
     {...props}
@@ -90,7 +90,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'h-12 whitespace-nowrap px-4 align-middle shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
+      'h-12 whitespace-nowrap px-4 align-middle shadow-[0_0_0_0.5px] shadow-border',
       className
     )}
     {...props}

apps/dashboard/src/components/ui/tooltip.tsx

@@ -35,10 +35,13 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 
 interface TooltiperProps {
   asChild?: boolean;
-  content: string;
+  content: React.ReactNode;
   children: React.ReactNode;
   className?: string;
   onClick?: () => void;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  delayDuration?: number;
+  sideOffset?: number;
 }
 export function Tooltiper({
   asChild,
@@ -46,14 +49,19 @@ export function Tooltiper({
   children,
   className,
   onClick,
+  side,
+  delayDuration = 0,
+  sideOffset = 10,
 }: TooltiperProps) {
   return (
-    <Tooltip delayDuration={0}>
+    <Tooltip delayDuration={delayDuration}>
       <TooltipTrigger asChild={asChild} className={className} onClick={onClick}>
         {children}
       </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent sideOffset={10}>{content}</TooltipContent>
+        <TooltipContent sideOffset={sideOffset} side={side}>
+          {content}
+        </TooltipContent>
       </TooltipPortal>
     </Tooltip>
   );