minor ui improvements for profile

apps/dashboard/src/components/click-to-copy.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { clipboard } from '@/utils/clipboard';
+import { toast } from 'sonner';
+
+import { Tooltiper } from './ui/tooltip';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  value: string;
+};
+
+const ClickToCopy = ({ children, value }: Props) => {
+  return (
+    <Tooltiper
+      content="Click to copy"
+      asChild
+      className="cursor-pointer"
+      onClick={() => {
+        clipboard(value);
+        toast('Copied to clipboard');
+      }}
+    >
+      {children}
+    </Tooltiper>
+  );
+};
+
+export default ClickToCopy;

apps/dashboard/src/components/events/list-properties-icon.tsx

@@ -1,5 +1,10 @@
 import { SerieIcon } from '../report/chart/SerieIcon';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import {
+  Tooltip,
+  TooltipContent,
+  Tooltiper,
+  TooltipTrigger,
+} from '../ui/tooltip';
 
 interface Props {
   country?: string;
@@ -23,46 +28,26 @@ export function ListPropertiesIcon({
   referrer_type,
 }: Props) {
   return (
-    <div className="flex gap-1">
+    <div className="flex gap-1.5">
       {country && (
-        <Tooltip>
-          <TooltipTrigger>
-            <SerieIcon name={country} />
-          </TooltipTrigger>
-          <TooltipContent>
-            {country}, {city}
-          </TooltipContent>
-        </Tooltip>
+        <Tooltiper content={[country, city].filter(Boolean).join(', ')}>
+          <SerieIcon name={country} />
+        </Tooltiper>
       )}
       {os && (
-        <Tooltip>
-          <TooltipTrigger>
-            <SerieIcon name={os} />
-          </TooltipTrigger>
-          <TooltipContent>
-            {os} ({os_version})
-          </TooltipContent>
-        </Tooltip>
+        <Tooltiper content={`${os} (${os_version})`}>
+          <SerieIcon name={os} />
+        </Tooltiper>
       )}
       {browser && (
-        <Tooltip>
-          <TooltipTrigger>
-            <SerieIcon name={browser} />
-          </TooltipTrigger>
-          <TooltipContent>
-            {browser} ({browser_version})
-          </TooltipContent>
-        </Tooltip>
+        <Tooltiper content={`${browser} (${browser_version})`}>
+          <SerieIcon name={browser} />
+        </Tooltiper>
       )}
       {referrer_name && (
-        <Tooltip>
-          <TooltipTrigger>
-            <SerieIcon name={referrer_name} />
-          </TooltipTrigger>
-          <TooltipContent>
-            {referrer_name} ({referrer_type})
-          </TooltipContent>
-        </Tooltip>
+        <Tooltiper content={`${referrer_name} (${referrer_type})`}>
+          <SerieIcon name={referrer_name} />
+        </Tooltiper>
       )}
     </div>
   );

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

@@ -38,20 +38,22 @@ interface TooltiperProps {
   content: string;
   children: React.ReactNode;
   className?: string;
+  onClick?: () => void;
 }
 export function Tooltiper({
   asChild,
   content,
   children,
   className,
+  onClick,
 }: TooltiperProps) {
   return (
-    <Tooltip>
-      <TooltipTrigger asChild={asChild} className={className}>
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild={asChild} className={className} onClick={onClick}>
         {children}
       </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent>{content}</TooltipContent>
+        <TooltipContent sideOffset={10}>{content}</TooltipContent>
       </TooltipPortal>
     </Tooltip>
   );

apps/dashboard/src/components/widget-table.tsx

@@ -36,26 +36,28 @@ export function WidgetTable<T>({
   keyExtractor,
 }: Props<T>) {
   return (
-    <table className={cn('w-full', className)}>
-      <WidgetTableHead>
-        <tr>
-          {columns.map((column) => (
-            <th key={column.name}>{column.name}</th>
-          ))}
-        </tr>
-      </WidgetTableHead>
-      <tbody>
-        {data.map((item) => (
-          <tr
-            key={keyExtractor(item)}
-            className="border-b border-border text-right text-sm last:border-0 [&_td:first-child]:text-left [&_td]:p-4"
-          >
+    <div className="w-full overflow-x-auto">
+      <table className={cn('w-full', className)}>
+        <WidgetTableHead>
+          <tr>
             {columns.map((column) => (
-              <td key={column.name}>{column.render(item)}</td>
+              <th key={column.name}>{column.name}</th>
             ))}
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </WidgetTableHead>
+        <tbody>
+          {data.map((item) => (
+            <tr
+              key={keyExtractor(item)}
+              className="border-b border-border text-right text-sm last:border-0 [&_td:first-child]:text-left [&_td]:p-4"
+            >
+              {columns.map((column) => (
+                <td key={column.name}>{column.render(item)}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }