From 9605c42a5b083c40f16cbdec562f6c5c6edc5145 Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Fri, 7 Jul 2023 15:32:46 -0500
Subject: [PATCH 1/3] Use built in group and auto-close props rather than
 custom logic

---
 src/components/FlowRunPopOver.vue | 62 +++++--------------------------
 1 file changed, 9 insertions(+), 53 deletions(-)

diff --git a/src/components/FlowRunPopOver.vue b/src/components/FlowRunPopOver.vue
index 8e680ceea..1ad9ea2f1 100644
--- a/src/components/FlowRunPopOver.vue
+++ b/src/components/FlowRunPopOver.vue
@@ -1,10 +1,10 @@
 <template>
-  <PPopOver ref="popover" class="flow-run-pop-over">
-    <template #target>
-      <div ref="trigger" class="flow-run-pop-over__trigger" @mouseover="open" />
+  <PPopOver class="flow-run-pop-over" group="flow-run-pop-over" auto-close>
+    <template #target="{ open }">
+      <div class="flow-run-pop-over__trigger" @mouseover="open" />
     </template>
 
-    <div ref="content" class="flow-run-pop-over__content">
+    <div class="flow-run-pop-over__content">
       <FlowRunPopoverContent :flow-run-id="flowRunId" />
     </div>
   </PPopOver>
@@ -12,60 +12,11 @@
 
 <script lang="ts" setup>
   import { PPopOver } from '@prefecthq/prefect-design'
-  import { onMounted, onUnmounted, ref } from 'vue'
   import FlowRunPopoverContent from '@/components/FlowRunPopOverContent.vue'
 
   defineProps<{
     flowRunId: string,
   }>()
-
-  const popover = ref<InstanceType<typeof PPopOver>>()
-  const trigger = ref<HTMLDivElement>()
-  const content = ref<HTMLDivElement>()
-
-  onMounted(() => {
-    document.addEventListener('mouseover', mouseover)
-    document.addEventListener('click', click)
-  })
-
-  onUnmounted(() => {
-    document.removeEventListener('mouseover', mouseover)
-    document.removeEventListener('click', click)
-  })
-
-  function open(): void {
-    if (popover.value) {
-      popover.value.open()
-    }
-  }
-
-  function click(event: MouseEvent): void {
-    const target = event.target as HTMLElement
-
-    if (!popover.value || !content.value) {
-      return
-    }
-
-    if (content.value.contains(target)) {
-      return
-    }
-
-    popover.value.close()
-  }
-
-  function mouseover(event: MouseEvent): void {
-    const target = event.target as HTMLElement
-
-    if (!popover.value || !trigger.value) {
-      return
-    }
-
-    if (trigger.value.contains(target) || !target.classList.contains('flow-run-pop-over__trigger')) {
-      return
-    }
-
-    popover.value.close()
-  }
 </script>
 
 <style>
@@ -84,4 +35,9 @@
   w-full
   h-full
 }
+
+.flow-run-pop-over__content { @apply
+  p-2
+  pointer-events-none
+}
 </style>
\ No newline at end of file

From 0d75b3288f9d2557db54559c82c71ca90597640b Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Fri, 7 Jul 2023 15:40:15 -0500
Subject: [PATCH 2/3] Prefer bottom/top over left/right positioning for the
 popover to make vertical scrubbing easier

---
 src/components/FlowRunPopOver.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/FlowRunPopOver.vue b/src/components/FlowRunPopOver.vue
index 1ad9ea2f1..ef907532e 100644
--- a/src/components/FlowRunPopOver.vue
+++ b/src/components/FlowRunPopOver.vue
@@ -1,5 +1,5 @@
 <template>
-  <PPopOver class="flow-run-pop-over" group="flow-run-pop-over" auto-close>
+  <PPopOver class="flow-run-pop-over" group="flow-run-pop-over" auto-close :placement="placement">
     <template #target="{ open }">
       <div class="flow-run-pop-over__trigger" @mouseover="open" />
     </template>
@@ -11,12 +11,14 @@
 </template>
 
 <script lang="ts" setup>
-  import { PPopOver } from '@prefecthq/prefect-design'
+  import { PPopOver, positions } from '@prefecthq/prefect-design'
   import FlowRunPopoverContent from '@/components/FlowRunPopOverContent.vue'
 
   defineProps<{
     flowRunId: string,
   }>()
+
+  const placement = [positions.bottom, positions.top, positions.right, positions.left]
 </script>
 
 <style>

From ab665ff5620f377530caec264a9fb1ac6efd58e2 Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Fri, 7 Jul 2023 16:53:40 -0500
Subject: [PATCH 3/3] Prefer to over bottom

---
 src/components/FlowRunPopOver.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FlowRunPopOver.vue b/src/components/FlowRunPopOver.vue
index ef907532e..1b41a5eaa 100644
--- a/src/components/FlowRunPopOver.vue
+++ b/src/components/FlowRunPopOver.vue
@@ -18,7 +18,7 @@
     flowRunId: string,
   }>()
 
-  const placement = [positions.bottom, positions.top, positions.right, positions.left]
+  const placement = [positions.top, positions.bottom, positions.right, positions.left]
 </script>
 
 <style>