feature(ui) - heatmaps ui changes

frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx

@@ -44,8 +44,8 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
   };
 
   return (
-    <div className="p-3 bg-gray-lightest">
-      <div className="mb-3 flex">
+    <div className="px-4 bg-gray-lightest">
+      <div className="my-3 flex">
         <DateRange
           // rangeValue={filters.rangeValue}
           startDate={filters.startDate}
@@ -55,7 +55,7 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
         />
       </div>
       <div className="mb-4 flex items-center">
-        <div className="mr-2 flex-shrink-0">In Page:</div>
+        <div className="mr-2 flex-shrink-0">In Page</div>
         <Dropdown
           labeled
           placeholder="change"
@@ -65,7 +65,8 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
           defaultValue={urlOptions[0].value}
           onChange={ onPageSelect }
           id="change-dropdown"
-          className="customDropdown"
+          className="customDropdown"          
+          style={{ minWidth: '80px', width: '100%' }}
         />
       </div>
       <Loader loading={ loading }>

frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx

@@ -10,18 +10,16 @@ interface Props {
 }
 
 function SelectorsList({ targets, activeTargetIndex }: Props) {     
-  return (
-    <div>
-      <NoContent
-        title="No data available."
-        size="small"
-        show={ targets && targets.length === 0 }
-      >
-        { targets && targets.map((target, index) => (
-          <SelectorCard target={target} index={index} showContent={activeTargetIndex === index} />
-        ))}
-      </NoContent>
-    </div>
+  return (    
+    <NoContent
+      title="No data available."
+      size="small"
+      show={ targets && targets.length === 0 }
+    >
+      { targets && targets.map((target, index) => (
+        <SelectorCard target={target} index={index} showContent={activeTargetIndex === index} />
+      ))}
+    </NoContent>    
   )
 }
 

frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.css

@@ -1,7 +1,7 @@
 .marker {
   position: absolute;
   z-index: 100;
-  border: 2px dashed transparent;
+  border: 2px dotted transparent;
   cursor: pointer;
   user-select: none;
 
@@ -57,7 +57,7 @@
 }
 
 .active {
-  border: 2px dashed $tealx;
+  border: 2px dotted $tealx;
 
   & .index {
     opacity: 1