From ffe22689eb43f42afc2d6bcf9b8b190b19a7e5d1 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 13 Jul 2022 15:01:50 -0700
Subject: [PATCH] feat: use floating-ui for better popover positioning

---
 assets/js/popover.js       | 11 +++++++++++
 assets/styles/base.scss    |  9 ++-------
 layouts/partials/head.html |  3 +++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/assets/js/popover.js b/assets/js/popover.js
index 494cd84..8eb637d 100644
--- a/assets/js/popover.js
+++ b/assets/js/popover.js
@@ -46,7 +46,18 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) {
               throwOnError: false
             })
           }
+
           li.addEventListener("mouseover", () => {
+            // fix tooltip positioning
+            window.FloatingUIDOM.computePosition(li, el, {
+              middleware: [window.FloatingUIDOM.offset(15), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()],
+            }).then(({ x, y }) => {
+              Object.assign(el.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+              })
+            })
+
             el.classList.add("visible")
           })
           li.addEventListener("mouseout", () => {
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 4426abb..8898ec3 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -389,7 +389,7 @@ header {
     cursor: pointer;
     & > p {
       display: inline;
-      padding-left: 0.5em;
+      padding: 0 0.5em 0 1em;
     }
   }
 
@@ -534,12 +534,10 @@ header {
   1% {
     display: inline-block;
     opacity: 0;
-    transform: translate(-50%, 40%);
   }
   100% {
     opacity: 1;
     visibility: visible;
-    transform: translate(-50%, 20%);
   }
 }
 
@@ -550,9 +548,9 @@ header {
   display: none;
   background-color: var(--light);
   padding: 1em;
+  margin: 1em;
   border: 1px solid var(--outlinegray);
   border-radius: 5px;
-  transform: translate(-50%, 40%);
   pointer-events: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
   user-select: none;
@@ -566,7 +564,6 @@ header {
   &.visible {
     opacity: 1;
     visibility: visible;
-    transform: translate(-50%, 20%);
     display: inline-block;
     animation: dropin 0.2s ease;
   }
@@ -590,8 +587,6 @@ header {
   }
 }
 
-
-
 #contact_buttons ul {
   list-style-type: none;
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 0890983..e3c6967 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -44,6 +44,9 @@
   <script src="{{$darkMode.Permalink}}"></script>
   {{partial "katex.html" .}}
 
+    
+  <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
+  <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
   {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
   resources.Minify }}
   <script src="{{$popover.Permalink}}"></script>