fix centering of certain dropdowns

src/components/extra_buttons/extra_buttons.vue

@@ -47,12 +47,10 @@
         </button>
       </div>
     </div>
-    <div
+    <i
       slot="trigger"
-      class="button-icon"
-    >
-      <i class="icon-ellipsis" />
-    </div>
+      class="icon-ellipsis button-icon"
+    />
   </Popover>
 </template>
 

src/components/popover/popover.js

@@ -25,8 +25,9 @@ const Popover = {
     updateStyles () {
       if (this.hidden) return { opacity: 0 }
 
-      // Popover will be anchored around this element
-      const anchorEl = this.$refs.trigger || this.$el
+      // Popover will be anchored around this element, trigger ref is the container, so
+      // its children are what are inside the slot. Expect only one slot="trigger".
+      const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
       const screenBox = anchorEl.getBoundingClientRect()
       // Screen position of the origin point for popover
       const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
@@ -86,7 +87,7 @@ const Popover = {
 
       this.styles = {
         opacity: 1,
-        transform: `translate(${Math.floor(translateX)}px, ${Math.floor(translateY)}px)`
+        transform: `translate(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)`
       }
     },
     showPopover () {

src/components/react_button/react_button.vue

@@ -2,6 +2,7 @@
   <Popover
     trigger="click"
     placement="top"
+    :offset="{ y: 5 }"
     class="react-button-popover"
   >
     <div
@@ -35,15 +36,12 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <div
+    <i
       v-if="loggedIn"
       slot="trigger"
-    >
-      <i
-        class="icon-smile button-icon add-reaction-button"
-        :title="$t('tool_tip.add_reaction')"
-      />
-    </div>
+      class="icon-smile button-icon add-reaction-button"
+      :title="$t('tool_tip.add_reaction')"
+    />
   </Popover>
 </template>