From dfd65aeceb1f42929c0528433e68db8247474a19 Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Wed, 13 Dec 2023 11:53:03 +0000
Subject: [PATCH] fix: selected row sticky cell background color in dark mode
 (#19280)

---
 frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss  | 7 +++++--
 frontend/src/scenes/experiments/ExperimentPreview.tsx | 8 +++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
index 0c8ace0230708..b4acbf6aa0674 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -192,7 +192,10 @@
             &.LemonTable__row--status-highlighted {
                 font-weight: 600;
                 color: var(--default);
-                background: var(--primary-bg-hover);
+
+                > td:not(.LemonTable__cell--sticky) {
+                    background: var(--primary-bg-hover);
+                }
             }
 
             > td {
@@ -365,7 +368,7 @@ body:not(.storybook-test-runner) {
     }
 
     tr.LemonTable__row--status-highlighted .LemonTable__cell--sticky::before {
-        background: #e8ecff; // TRICKY: This is a one-off opaque form of --primary-bg-hover, keep in sync with source
+        background: var(--primary-bg-hover);
     }
 
     .scrollable--left {
diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
index ed4a4ef9e442e..060900fb51480 100644
--- a/frontend/src/scenes/experiments/ExperimentPreview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -463,9 +463,11 @@ export function MetricDisplay({ filters }: { filters?: FilterType }): JSX.Elemen
                                 />
                             </b>
                         </div>
-                        {event.properties?.map((prop: AnyPropertyFilter) => (
-                            <PropertyFilterButton key={prop.key} item={prop} />
-                        ))}
+                        <div className="space-y-1">
+                            {event.properties?.map((prop: AnyPropertyFilter) => (
+                                <PropertyFilterButton key={prop.key} item={prop} />
+                            ))}
+                        </div>
                     </div>
                 ))}
         </>