From a6d654291c0e06e06b154226ec08ff4210545b5f Mon Sep 17 00:00:00 2001
From: Michael Matloka <dev@twixes.com>
Date: Fri, 4 Oct 2024 23:14:47 +0200
Subject: [PATCH] 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        |  2 +-
 frontend/src/scenes/activity/live/LiveEventsTable.tsx | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index cc5eceaf72da6..b72634b1c1211 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/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);
diff --git a/frontend/src/scenes/activity/live/LiveEventsTable.tsx b/frontend/src/scenes/activity/live/LiveEventsTable.tsx
index a34e727f2cb83..4d78f489c2572 100644
--- a/frontend/src/scenes/activity/live/LiveEventsTable.tsx
+++ b/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',