fix: selected row sticky cell background color in dark mode (#19280)

PostHog · Dec 13, 2023 · dfd65ae · dfd65ae
1 parent 236ac85
commit dfd65ae
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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>
                 ))}
         </>