feat(activity): Show distinct ID in live events (#25390)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/lemon-ui/Popover/Popover.scss

@@ -28,7 +28,7 @@
     position: relative; // For arrow
     flex-grow: 1;
     max-width: 100%;
-    overflow: hidden;
+    overflow: visible; // Explicitly `visible`. We can't set `hidden`, because that would hide the popover arrow
     background: var(--bg-light);
     border: 1px solid var(--secondary-3000-button-border);
     border-radius: var(--radius);

frontend/src/scenes/activity/live/LiveEventsTable.tsx

@@ -1,3 +1,4 @@
+import { PersonDisplay } from '@posthog/apps-common'
 import { IconPauseFilled, IconPlayFilled } from '@posthog/icons'
 import { LemonButton, Spinner, Tooltip } from '@posthog/lemon-ui'
 import clsx from 'clsx'
@@ -19,6 +20,16 @@ const columns: LemonTableColumns<LiveEvent> = [
             return <PropertyKeyInfo value={event.event} type={TaxonomicFilterGroupType.Events} />
         },
     },
+    {
+        title: 'Person distinct ID',
+        tooltip:
+            'Some events may be missing a person profile – this is expected, because live events are streamed before person processing completes',
+        key: 'person',
+        className: 'max-w-80',
+        render: function Render(_, event: LiveEvent) {
+            return <PersonDisplay person={{ distinct_id: event.distinct_id }} />
+        },
+    },
     {
         title: 'URL / Screen',
         key: '$current_url',