From d25c2f04c9757918b17231b6cbee6031fdfe1f74 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 21:21:09 +0200
Subject: [PATCH] resize popover when toggling editing pinned items

---
 src/components/popover/popover.js             | 19 ++++++++++++-------
 src/components/popover/popover.vue            |  1 +
 .../status_action_buttons.vue                 |  5 ++---
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 6b49cf682..242068109 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -275,6 +275,11 @@ const Popover = {
       this.scrollable.removeEventListener('scroll', this.onScroll)
       this.scrollable.removeEventListener('resize', this.onResize)
     },
+    resizePopover () {
+      setTimeout(() => {
+        this.updateStyles()
+      }, 1)
+    },
     onMouseenter (e) {
       if (this.trigger === 'hover') {
         this.lockReEntry = false
@@ -323,7 +328,12 @@ const Popover = {
       this.updateStyles()
     },
     onResize (e) {
-      this.updateStyles()
+      const content = this.$refs.content
+      if (!content) return
+      if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
+        this.updateStyles()
+        this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
+      }
     },
     onChildPopoverState (childRef, state) {
       if (state) {
@@ -337,12 +347,7 @@ const Popover = {
     // Monitor changes to content size, update styles only when content sizes have changed,
     // that should be the only time we need to move the popover box if we don't care about scroll
     // or resize
-    const content = this.$refs.content
-    if (!content) return
-    if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
-      this.updateStyles()
-      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
-    }
+    this.onResize()
   },
   mounted () {
     this.teleport = true
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 33817fa6a..f91abc3f0 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -33,6 +33,7 @@
             name="content"
             class="popover-inner"
             :close="hidePopover"
+            :resize="resizePopover"
           />
         </div>
       </transition>
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 62e1745dc..4ee11f4b9 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -41,7 +41,6 @@
         :tabindex="0"
         placement="top"
         :offset="{ y: 5 }"
-        :bound-to="{ x: 'container' }"
         remove-padding
         @show="onShow"
         @close="onClose"
@@ -52,7 +51,7 @@
             icon="ellipsis-h"
           />
         </template>
-        <template #content="{close}">
+        <template #content="{close, resize}">
           <div
             :id="`popup-menu-${randomSeed}`"
             class="dropdown-menu extra-action-buttons"
@@ -63,7 +62,7 @@
                 class="main-button"
                 role="menuitem"
                 :tabindex="0"
-                @click.stop="showPin = !showPin"
+                @click.stop="() => { resize(); showPin = !showPin }"
               >
                 <FAIcon
                   class="fa-scale-110"