fix: mostly UI imporvements

apps/start/src/components/events/table/columns.tsx

@@ -7,6 +7,7 @@ import { getProfileName } from '@/utils/getters';
 import type { ColumnDef } from '@tanstack/react-table';
 
 import { ColumnCreatedAt } from '@/components/column-created-at';
+import { ProfileAvatar } from '@/components/profiles/profile-avatar';
 import { KeyValueGrid } from '@/components/ui/key-value-grid';
 import type { IServiceEvent } from '@openpanel/db';
 
@@ -107,8 +108,9 @@ export function useColumns() {
           return (
             <ProjectLink
               href={`/profiles/${encodeURIComponent(profile.id)}`}
-              className="whitespace-nowrap font-medium hover:underline"
+              className="group whitespace-nowrap font-medium hover:underline row items-center gap-2"
             >
+              <ProfileAvatar size="sm" {...profile} />
               {getProfileName(profile)}
             </ProjectLink>
           );

apps/start/src/components/events/table/item.tsx

@@ -1,5 +1,6 @@
 import { ProfileAvatar } from '@/components/profiles/profile-avatar';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { Tooltiper } from '@/components/ui/tooltip';
 import { pushModal } from '@/modals';
 import { cn } from '@/utils/cn';
 import { formatTimeAgoOrDateTime } from '@/utils/date';
@@ -115,7 +116,7 @@ export const EventItem = memo<EventItemProps>(
             )}
             {viewOptions.profileId !== false && (
               <Pill
-                className="@max-xl:ml-auto @max-lg:[&>span]:inline mx-4"
+                className="@max-xl:ml-auto @max-lg:[&>span]:inline"
                 icon={<ProfileAvatar size="xs" {...event.profile} />}
               >
                 {getProfileName(event.profile)}
@@ -164,7 +165,8 @@ function Pill({
   className,
 }: { children: React.ReactNode; icon?: React.ReactNode; className?: string }) {
   return (
-    <div
+    <Tooltiper
+      content={children}
       className={cn(
         'shrink-0 whitespace-nowrap inline-flex gap-2 items-center rounded-full @3xl:text-muted-foreground h-6 text-xs font-mono',
         className,
@@ -172,6 +174,6 @@ function Pill({
     >
       {icon && <div className="size-4 center-center">{icon}</div>}
       <div className="hidden @3xl:inline">{children}</div>
-    </div>
+    </Tooltiper>
   );
 }