From bc00f9c4b25dd4b99cb6e53014624f41ee929654 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 3 Jan 2024 17:21:35 +0100
Subject: [PATCH] fix(Popover): improve placement with `hover` mode

Improvement of #781
---
 src/runtime/components/overlays/Popover.vue | 29 ++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index aa579d0b39..e4ad63b8e9 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -124,15 +124,32 @@ export default defineComponent({
     })
 
     const containerStyle = computed(() => {
+      if (props.mode !== 'hover') {
+        return {}
+      }
+
       const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
+      const placement = popper.value.placement?.split('-')[0]
       const padding = `${offsetDistance}px`
 
-      return props.mode === 'hover' ? {
-        paddingTop: padding,
-        paddingBottom: padding,
-        paddingLeft: padding,
-        paddingRight: padding
-      } : {}
+      if (placement === 'top' || placement === 'bottom') {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding
+        }
+      } else if (placement === 'left' || placement === 'right') {
+        return {
+          paddingLeft: padding,
+          paddingRight: padding
+        }
+      } else {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding,
+          paddingLeft: padding,
+          paddingRight: padding
+        }
+      }
     })
 
     function onMouseOver () {