src/components/popover/popover.js

@@ -304,13 +304,10 @@ const Popover = {
       }
       this.scrollable.addEventListener('scroll', this.onScroll)
       this.scrollable.addEventListener('resize', this.onResize)
-      // My assumption is that upon showing popover initially has different size
-      // as its contents are getting populating, so logic uses those incorrect
-      // sizes as basis
-      setTimeout(() => {
+      this.$nextTick(() => {
         if (wasHidden) this.$emit('show')
         this.updateStyles()
-      }, 1)
+      })
     },
     hidePopover() {
       if (this.disabled) return

src/components/status_action_buttons/status_action_buttons.vue

@@ -42,7 +42,7 @@
         :trigger-attrs="triggerAttrs"
         class="quick-action"
         :tabindex="0"
-        placement="bottom"
+        placement="top"
         :offset="{ y: 5 }"
         remove-padding
         @close="onExtraClose"
@@ -59,6 +59,23 @@
             class="dropdown-menu extra-action-buttons"
             role="menu"
           >
+            <div
+              v-if="currentUser"
+              class="menu-item dropdown-item extra-action -icon"
+            >
+              <button
+                class="main-button"
+                role="menuitem"
+                :tabindex="0"
+                @click.stop="() => { resize(); showPin = !showPin }"
+              >
+                <FAIcon
+                  class="fa-scale-110"
+                  fixed-width
+                  icon="wrench"
+                /><span>{{ $t('nav.edit_pinned') }}</span>
+              </button>
+            </div>
             <div
               v-for="button in extraButtons"
               :key="button.name"
@@ -94,23 +111,6 @@
                 />
               </button>
             </div>
-            <div
-              v-if="currentUser"
-              class="menu-item dropdown-item extra-action -icon"
-            >
-              <button
-                class="main-button"
-                role="menuitem"
-                :tabindex="0"
-                @click.stop="() => { resize(); showPin = !showPin }"
-              >
-                <FAIcon
-                  class="fa-scale-110"
-                  fixed-width
-                  icon="wrench"
-                /><span>{{ $t('nav.edit_pinned') }}</span>
-              </button>
-            </div>
           </div>
         </template>
       </Popover>