From 3ebb654798a876d2ecc64642511ad3ce520a36a9 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Tue, 13 Aug 2024 10:56:49 -0400
Subject: [PATCH] RC #291 - Adding styling to event popover

---
 .../core-data/src/components/FacetTimeline.js    | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/core-data/src/components/FacetTimeline.js b/packages/core-data/src/components/FacetTimeline.js
index 38a5c4a0..f6647868 100644
--- a/packages/core-data/src/components/FacetTimeline.js
+++ b/packages/core-data/src/components/FacetTimeline.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { useTimer } from '@performant-software/shared-components';
+import { Numbers, useTimer } from '@performant-software/shared-components';
 import * as Popover from '@radix-ui/react-popover';
 import * as Slider from '@radix-ui/react-slider';
 import { clsx } from 'clsx';
@@ -248,8 +248,7 @@ const FacetTimeline = (props: Props) => {
   return (
     <div
       className={clsx(
-        'py-7',
-        { 'pt-16': !props.description },
+        { 'pt-24': !props.description },
         { 'pt-40': props.description },
         props.className
       )}
@@ -291,7 +290,7 @@ const FacetTimeline = (props: Props) => {
                     right: 20,
                     bottom: 10
                   }}
-                  sideOffset={-20}
+                  sideOffset={Numbers.getRandomInt(-30, 10)}
                   side='top'
                 >
                   <button
@@ -316,10 +315,14 @@ const FacetTimeline = (props: Props) => {
                     onClick={() => props.onClick && props.onClick(event)}
                     type='button'
                   >
-                    <h2>
+                    <h2
+                      className='font-bold text-lg whitespace-nowrap line-clamp-1 text-ellipsis'
+                    >
                       { event.name }
                     </h2>
-                    <p>
+                    <p
+                      className='text-muted'
+                    >
                       { EventUtils.getDateView(event) }
                     </p>
                     { props.description && (
@@ -356,6 +359,7 @@ const FacetTimeline = (props: Props) => {
         min={min}
         onValueChange={setValue}
         onValueCommit={refine}
+        position='bottom'
         value={value}
       />
     </div>