Add transparent rect for pending lines to be clickable for Firefox/Safari (#2813)

Author: Alex-Tideman

src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte

@@ -94,6 +94,7 @@
   $: activityTaskScheduled = group.eventList.find(isActivityTaskStartedEvent);
   $: retried =
     activityTaskScheduled && activityTaskScheduled.attributes?.attempt > 1;
+  $: pendingLine = group.isPending || !!pauseTime;
 </script>
 
 <g
@@ -104,6 +105,19 @@
   class="relative cursor-pointer"
   {height}
 >
+  {#if pendingLine}
+    {@const width = pauseTime
+      ? points[1] - points[0]
+      : canvasWidth - 2 * gutter}
+    <rect
+      y={y - height / 2}
+      x={points[0]}
+      {width}
+      {height}
+      fill="transparent"
+      pointer-events="all"
+    />
+  {/if}
   {#each points as x, index}
     {@const nextPoint = points[index + 1]}
     {@const showText = textIndex === index}

src/lib/layouts/workflow-history-layout.svelte

@@ -90,7 +90,7 @@
     {/if}
   </div>
 </div>
-<div class="relative px-2 pb-24 md:px-4 lg:px-8">
+<div class="relative select-none px-2 pb-24 md:px-4 lg:px-8">
   <div
     class="flex flex-wrap items-center justify-between gap-2 bg-off-white/50 py-2 xl:gap-8 dark:bg-space-black/50"
     class:sticky-header={!$minimizeEventView}