From fd831a27f4e9c6bcd5c40f3449d63546fba2560d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 May 2022 00:56:23 +0300
Subject: [PATCH] experimental disjointed popups

---
 src/App.vue                                  |  1 +
 src/components/popover/popover.js            | 10 ++++++-
 src/components/popover/popover.vue           | 28 +++++++++++---------
 src/components/react_button/react_button.vue |  1 +
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5b448972..c217ade5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,6 +54,7 @@
     <PostStatusModal />
     <SettingsModal />
     <div id="modal" />
+    <div id="popovers" />
     <GlobalNoticeList />
   </div>
 </template>
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index a30a37c9..db283ef0 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -43,6 +43,7 @@ const Popover = {
   methods: {
     containerBoundingClientRect () {
       const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
+      console.log(container)
       return container.getBoundingClientRect()
     },
     updateStyles () {
@@ -125,10 +126,17 @@ const Popover = {
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
+      console.log(translateX + screenBox.x + screenBox.width)
+      console.log(Math.round(parentBounds.width))
       this.styles = {
         opacity: 1,
-        transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        // transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        left: `${Math.round(translateX + screenBox.x + screenBox.width / 2)}px`,
+        top: `${Math.round(translateY + screenBox.y + screenBox.height / 2)}px`,
+        maxWidth: `${Math.round(parentBounds.width)}px`,
+        position: 'fixed'
       }
+      console.log(this.styles)
     },
     showPopover () {
       const wasHidden = this.hidden
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index c2a3e801..8f6ef2e6 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -11,19 +11,21 @@
     >
       <slot name="trigger" />
     </button>
-    <div
-      v-if="!hidden"
-      ref="content"
-      :style="styles"
-      class="popover"
-      :class="popoverClass || 'popover-default'"
-    >
-      <slot
-        name="content"
-        class="popover-inner"
-        :close="hidePopover"
-      />
-    </div>
+    <teleport to="#popovers">
+      <div
+        v-if="!hidden"
+        ref="content"
+        :style="styles"
+        class="popover"
+        :class="popoverClass || 'popover-default'"
+      >
+        <slot
+          name="content"
+          class="popover-inner"
+          :close="hidePopover"
+        />
+      </div>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 7f35b7b5..8da691c0 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -6,6 +6,7 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    popover-class="ReactButton popover-default"
     @show="focusInput"
   >
     <template v-slot:content="{close}">