From 5262676e0e501332f79c0f36d2a063290212b2f8 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 12 Feb 2020 19:22:40 +0200
Subject: [PATCH 1/8] rewrite popover because v-tooltip is slow as heck

---
 src/App.js                                    |   4 +-
 src/App.vue                                   |   1 +
 src/components/extra_buttons/extra_buttons.js |   3 +
 .../extra_buttons/extra_buttons.vue           |  14 +-
 src/components/popover/popover.js             | 113 ++++++++++
 src/components/popover/popover.vue            | 195 ++++++++++++++++++
 src/components/popover/popover_target.js      |  23 +++
 src/components/popover/popover_target.vue     |  25 +++
 src/components/popper/popper.scss             | 147 -------------
 .../status_popover/status_popover.js          |   3 +-
 .../status_popover/status_popover.vue         |  22 +-
 src/main.js                                   |   4 +-
 src/modules/popover.js                        |  31 +++
 13 files changed, 417 insertions(+), 168 deletions(-)
 create mode 100644 src/components/popover/popover.js
 create mode 100644 src/components/popover/popover.vue
 create mode 100644 src/components/popover/popover_target.js
 create mode 100644 src/components/popover/popover_target.vue
 create mode 100644 src/modules/popover.js

diff --git a/src/App.js b/src/App.js
index 61b5eec1..041e131a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,6 +12,7 @@ import MobilePostStatusButton from './components/mobile_post_status_button/mobil
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
+import PopoverTarget from './components/popover/popover_target.vue'
 import { windowWidth } from './services/window_utils/window_utils'
 
 export default {
@@ -30,7 +31,8 @@ export default {
     MobilePostStatusButton,
     MobileNav,
     UserReportingModal,
-    PostStatusModal
+    PostStatusModal,
+    PopoverTarget
   },
   data: () => ({
     mobileActivePanel: 'timeline',
diff --git a/src/App.vue b/src/App.vue
index 1b1c2648..de15802f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -123,6 +123,7 @@
     <UserReportingModal />
     <PostStatusModal />
     <portal-target name="modal" />
+    <PopoverTarget />
   </div>
 </template>
 
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 5ac73e97..37485383 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,5 +1,8 @@
+import Popover from '../popover/popover.vue'
+
 const ExtraButtons = {
   props: [ 'status' ],
+  components: { Popover },
   methods: {
     deleteStatus () {
       const confirmed = window.confirm(this.$t('status.delete_confirm'))
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 746f1c91..3f003425 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-popover
+  <Popover
     v-if="canDelete || canMute || canPin"
     trigger="click"
-    placement="top"
+    placement="bottom"
     class="extra-button-popover"
   >
-    <div slot="popover">
+    <div slot="content">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -47,10 +47,10 @@
         </button>
       </div>
     </div>
-    <div class="button-icon">
+    <div slot="trigger" class="button-icon">
       <i class="icon-ellipsis" />
     </div>
-  </v-popover>
+  </Popover>
 </template>
 
 <script src="./extra_buttons.js" ></script>
@@ -59,6 +59,10 @@
 @import '../../_variables.scss';
 @import '../popper/popper.scss';
 
+.dropdown-menu {
+  flex-shrink: 0;
+}
+
 .icon-ellipsis {
   cursor: pointer;
 
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
new file mode 100644
index 00000000..4ee08323
--- /dev/null
+++ b/src/components/popover/popover.js
@@ -0,0 +1,113 @@
+
+const Popover = {
+  name: 'Popover',
+  props: [
+    'trigger',
+    'placement',
+    'show'
+  ],
+  data () {
+    return {
+      hidden: true,
+      styles: { opacity: 0 }
+    }
+  },
+  computed: {
+    display () {
+      return !this.hidden
+    }
+  },
+  methods: {
+    /*
+    registerPopover (e) {
+      if (!this.targetId) {
+        this.$store.dispatch('registerPopover', e.target).then(id => this.targetId = id)
+      }
+    },
+    unregisterPopover () {
+      if (this.targetId) {
+        this.$store.dispatch('unregisterPopover', this.targetId)
+        this.targetId = null
+      }
+    },
+    */
+    showPopover () {
+      this.hidden = false
+      this.$nextTick(function () {
+        if (this.hidden) return { opacity: 0 }
+
+        const anchorEl = this.$refs.trigger || this.$el
+        console.log(anchorEl)
+        const screenBox = anchorEl.getBoundingClientRect()
+        const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top}
+        const content = this.$refs.content
+        let horizOffset = 0
+
+        if ((origin.x - content.offsetWidth * 0.5) < 25) {
+          horizOffset += -(origin.x - content.offsetWidth * 0.5) + 25
+        }
+
+        console.log((origin.x + content.offsetWidth * 0.5), (window.innerWidth - 25))
+        if ((origin.x + content.offsetWidth * 0.5) > window.innerWidth - 25) {
+          horizOffset -= (origin.x + content.offsetWidth * 0.5) - (window.innerWidth - 25)
+        }
+        // Default to whatever user wished with placement prop
+        let usingTop = this.placement !== 'bottom'
+
+        // Handle special cases, first force to displaying on top if there's not space on bottom,
+        // regardless of what placement value was. Then check if there's not space on top, and
+        // force to bottom, again regardless of what placement value was.
+        if (origin.y + content.offsetHeight > (window.innerHeight - 25)) usingTop = true
+        if (origin.y - content.offsetHeight < 50) usingTop = false
+
+        const vertAlign = usingTop ?
+          {
+            bottom: `${anchorEl.offsetHeight}px`
+          } :
+          {
+            top: `${anchorEl.offsetHeight}px`
+          }
+        this.styles = {
+          opacity: '100%',
+          left: `${(anchorEl.offsetLeft + anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset}px`,
+          ...vertAlign
+        }
+      })
+    },
+    hidePopover () {
+      this.hidden = true
+      this.styles = { opacity: 0 }
+    },
+    onMouseenter (e) {
+      console.log(this.trigger)
+      if (this.trigger === 'hover') this.showPopover()
+    },
+    onMouseleave (e) {
+      if (this.trigger === 'hover') this.hidePopover()
+    },
+    onClick (e) {
+      if (this.trigger === 'click') {
+        if (this.hidden) {
+          this.showPopover()
+        } else {
+          this.hidePopover()
+        }
+      }
+    },
+    onClickOutside (e) {
+      if (this.hidden) return
+      if (this.$el.contains(e.target)) return
+      console.log(e.target)
+      this.hidePopover()
+    }
+  },
+  created () {
+    document.addEventListener("click", this.onClickOutside)
+  },
+  destroyed () {
+    document.removeEventListener("click", this.onClickOutside)
+    this.hidePopover()
+  }
+}
+
+export default Popover
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
new file mode 100644
index 00000000..273a0a69
--- /dev/null
+++ b/src/components/popover/popover.vue
@@ -0,0 +1,195 @@
+<template>
+  <!-- This is for the weird portal shit
+  <div
+    @mouseenter="registerPopover"
+    @mouseleave="unregisterPopover"
+  >
+    <slot name="trigger"></slot>
+    <portal
+      v-if="targetId"
+      :to="targetId"
+    >
+      <slot name="content"></slot>
+    </portal>
+  </div>
+  -->
+  <div
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <div @click="onClick" ref="trigger">
+      <slot name="trigger"></slot>
+    </div>
+    <div
+      v-if="display"
+      :style="styles"
+      class="popover"
+    >
+      <div
+        ref="content"
+        class="popover-inner"
+      >
+      <!-- onSuccess is to mimic basic functionality of v-popover -->
+        <slot
+          name="content"
+          @onSuccess="hidePopover"
+        ></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./popover.js" />
+
+<style lang=scss>
+@import '../../_variables.scss';
+
+.popover {
+  z-index: 8;
+  position: absolute;
+  min-width: 0;
+
+  .popover-inner {
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+    border-radius: $fallback--btnRadius;
+    border-radius: var(--btnRadius, $fallback--btnRadius);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+  }
+
+  .popover-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: $fallback--bg;
+    border-color: var(--bg, $fallback--bg);
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .popover-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -4px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .popover-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -4px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .popover-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -4px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .popover-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -4px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
+}
+
+.dropdown-menu {
+  display: block;
+  padding: .5rem 0;
+  font-size: 1rem;
+  text-align: left;
+  list-style: none;
+  max-width: 100vw;
+  z-index: 10;
+  white-space: nowrap;
+
+  .dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
+  }
+
+  .dropdown-item {
+    line-height: 21px;
+    margin-right: 5px;
+    overflow: auto;
+    display: block;
+    padding: .25rem 1.0rem .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: nowrap;
+    border: none;
+    border-radius: 0px;
+    background-color: transparent;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+
+    &-icon {
+      padding-left: 0.5rem;
+
+      i {
+        margin-right: 0.25rem;
+      }
+    }
+
+    &:hover {
+      // TODO: improve the look on breeze themes
+      background-color: $fallback--fg;
+      background-color: var(--btn, $fallback--fg);
+      box-shadow: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/popover/popover_target.js b/src/components/popover/popover_target.js
new file mode 100644
index 00000000..60bed5c7
--- /dev/null
+++ b/src/components/popover/popover_target.js
@@ -0,0 +1,23 @@
+const PopoverTarget = {
+  name: 'PopoverTarget',
+  computed: {
+    ids () {
+      const popovers = this.$store.state.popover.popovers
+      return Object.keys(popovers)
+    },
+    styles () {
+      return this.ids.reduce((acc, id) => {
+        const el = this.$store.state.popover.popovers[id]
+        const box = el.getBoundingClientRect()
+        acc[id] = {
+          top: `${box.y}px`,
+          left: `${box.x}px`
+        }
+        console.log(acc)
+        return acc
+      }, {})
+    }
+  }
+}
+
+export default PopoverTarget
diff --git a/src/components/popover/popover_target.vue b/src/components/popover/popover_target.vue
new file mode 100644
index 00000000..f012823c
--- /dev/null
+++ b/src/components/popover/popover_target.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="popover-targets">
+    <portal-target
+      v-for="id in ids"
+      :key="id"
+      :name="id"
+      :style="styles[id]"
+      class="popover-target"
+    />
+  </div>
+</template>
+<script src="./popover_target.js" />
+<style lang="scss">
+
+.popover-targets {
+  top: 0;
+  left: 0;
+  position: fixed;
+}
+
+.popover-target {
+  position: fixed;
+}
+
+</style>
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 06daa871..e69de29b 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -1,147 +0,0 @@
-@import '../../_variables.scss';
-
-.tooltip.popover {
-  z-index: 8;
-
-  .popover-inner {
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-    box-shadow: var(--panelShadow);
-    border-radius: $fallback--btnRadius;
-    border-radius: var(--btnRadius, $fallback--btnRadius);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-  }
-
-  .popover-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: $fallback--bg;
-    border-color: var(--bg, $fallback--bg);
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .popover-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .popover-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s, visibility .15s;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity .15s;
-  }
-}
-
-.dropdown-menu {
-  display: block;
-  padding: .5rem 0;
-  font-size: 1rem;
-  text-align: left;
-  list-style: none;
-  max-width: 100vw;
-  z-index: 10;
-
-  .dropdown-divider {
-    height: 0;
-    margin: .5rem 0;
-    overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
-  }
-
-  .dropdown-item {
-    line-height: 21px;
-    margin-right: 5px;
-    overflow: auto;
-    display: block;
-    padding: .25rem 1.0rem .25rem 1.5rem;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: normal;
-    border: none;
-    border-radius: 0px;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-
-    &-icon {
-      padding-left: 0.5rem;
-
-      i {
-        margin-right: 0.25rem;
-      }
-    }
-
-    &:hover {
-      // TODO: improve the look on breeze themes
-      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
-      box-shadow: none;
-    }
-  }
-}
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 19f16bd9..4055e5cb 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -20,7 +20,8 @@ const StatusPopover = {
     }
   },
   components: {
-    Status: () => import('../status/status.vue')
+    Status: () => import('../status/status.vue'),
+    Popover: () => import('../popover/popover.vue')
   },
   methods: {
     enter () {
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index eacf4c06..9f37e4e7 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,11 +1,9 @@
 <template>
-  <v-popover
-    popover-class="status-popover"
-    placement="top-start"
-    :popper-options="popperOptions"
-    @show="enter()"
-  >
-    <template slot="popover">
+  <Popover trigger="hover">
+    <template slot="trigger">
+      <slot />
+    </template>
+    <div slot="content" class="status-popover">
       <Status
         v-if="status"
         :is-preview="true"
@@ -18,10 +16,8 @@
       >
         <i class="icon-spin4 animate-spin" />
       </div>
-    </template>
-
-    <slot />
-  </v-popover>
+    </div>
+  </Popover>
 </template>
 
 <script src="./status_popover.js" ></script>
@@ -29,11 +25,11 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.tooltip.popover.status-popover {
+.status-popover {
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  margin-left: 0.5em;
+  margin: 0.5em 0;
 
   .popover-inner {
     border-color: $fallback--border;
diff --git a/src/main.js b/src/main.js
index baf73ac8..d74ff63a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,6 +19,7 @@ import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
 import pollsModule from './modules/polls.js'
 import postStatusModule from './modules/postStatus.js'
+import popoverModule from './modules/popover.js'
 
 import VueI18n from 'vue-i18n'
 
@@ -89,7 +90,8 @@ const persistedStateOptions = {
       oauthTokens: oauthTokensModule,
       reports: reportsModule,
       polls: pollsModule,
-      postStatus: postStatusModule
+      postStatus: postStatusModule,
+      popover: popoverModule
     },
     plugins: [persistedState, pushNotifications],
     strict: false // Socket modifies itself, let's ignore this for now.
diff --git a/src/modules/popover.js b/src/modules/popover.js
new file mode 100644
index 00000000..5b01ccbb
--- /dev/null
+++ b/src/modules/popover.js
@@ -0,0 +1,31 @@
+import { omit } from 'lodash'
+import { set } from 'vue'
+
+const popover = {
+  state: {
+    popovers: {}
+  },
+  mutations: {
+    registerPopover (state, { id, el }) {
+      set(state.popovers, id, el)
+    },
+    unregisterPopover (state, { id }) {
+      state.popovers = omit(state.popovers, id)
+    }
+  },
+  actions: {
+    registerPopover (store, el) {
+      // Generate unique id, it will be used to link portal and portal-target
+      // popover-target will make portal targets for each registered popover
+      // el will be used by popover target to put popovers in their places.
+      let id = Math.floor(Math.random() * 1000000).toString()
+      store.commit('registerPopover', { id, el })
+      return id
+    },
+    unregisterPopover (store, id) {
+      store.commit('unregisterPopover', { id })
+    }
+  }
+}
+
+export default popover

From 3c136c241fdeadd4b1c0130b90f4ff8a1fda601b Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 14 Feb 2020 09:05:33 +0200
Subject: [PATCH 2/8] make more components use new popover, fix some things

---
 src/App.js                                    |   4 +-
 src/App.vue                                   |   1 -
 .../account_actions/account_actions.js        |   4 +-
 .../account_actions/account_actions.vue       |  22 ++--
 .../emoji_reactions/emoji_reactions.js        |   4 +-
 .../emoji_reactions/emoji_reactions.vue       |  11 +-
 .../extra_buttons/extra_buttons.vue           |   9 +-
 src/components/popover/popover.js             | 118 +++++++++++-------
 src/components/popover/popover.vue            |  51 +++-----
 src/components/react_button/react_button.js   |  23 ++--
 src/components/react_button/react_button.vue  |  20 +--
 src/components/status/status.vue              |  11 +-
 .../status_popover/status_popover.js          |  10 +-
 .../status_popover/status_popover.vue         |  29 +++--
 src/main.js                                   |   4 +-
 src/modules/popover.js                        |  31 -----
 16 files changed, 166 insertions(+), 186 deletions(-)
 delete mode 100644 src/modules/popover.js

diff --git a/src/App.js b/src/App.js
index 041e131a..61b5eec1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,6 @@ import MobilePostStatusButton from './components/mobile_post_status_button/mobil
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
-import PopoverTarget from './components/popover/popover_target.vue'
 import { windowWidth } from './services/window_utils/window_utils'
 
 export default {
@@ -31,8 +30,7 @@ export default {
     MobilePostStatusButton,
     MobileNav,
     UserReportingModal,
-    PostStatusModal,
-    PopoverTarget
+    PostStatusModal
   },
   data: () => ({
     mobileActivePanel: 'timeline',
diff --git a/src/App.vue b/src/App.vue
index de15802f..1b1c2648 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -123,7 +123,6 @@
     <UserReportingModal />
     <PostStatusModal />
     <portal-target name="modal" />
-    <PopoverTarget />
   </div>
 </template>
 
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index d2153680..5d7ecf7e 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,4 +1,5 @@
 import ProgressButton from '../progress_button/progress_button.vue'
+import Popover from '../popover/popover.vue'
 
 const AccountActions = {
   props: [
@@ -8,7 +9,8 @@ const AccountActions = {
     return { }
   },
   components: {
-    ProgressButton
+    ProgressButton,
+    Popover
   },
   methods: {
     showRepeats () {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index d3235be1..1fd00a1e 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="account-actions">
-    <v-popover
+    <Popover
       trigger="click"
-      class="account-tools-popover"
-      :container="false"
-      placement="bottom-end"
-      :offset="5"
+      placement="bottom"
     >
-      <div slot="popover">
+      <div
+        slot="content"
+        class="account-tools-popover"
+      >
         <div class="dropdown-menu">
           <template v-if="user.following">
             <button
@@ -51,10 +51,13 @@
           </button>
         </div>
       </div>
-      <div class="btn btn-default ellipsis-button">
+      <div
+        slot="trigger"
+        class="btn btn-default ellipsis-button"
+      >
         <i class="icon-ellipsis trigger-button" />
       </div>
-    </v-popover>
+    </Popover>
   </div>
 </template>
 
@@ -67,6 +70,9 @@
   margin: 0 .8em;
 }
 
+.account-tools-popover {
+}
+
 .account-actions button.dropdown-item {
   margin-left: 0;
 }
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index b799ac9a..bd2ec826 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,11 +1,13 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import Popover from '../popover/popover.vue'
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
 const EmojiReactions = {
   name: 'EmojiReactions',
   components: {
-    UserAvatar
+    UserAvatar,
+    Popover
   },
   props: ['status'],
   data: () => ({
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index e5b6d9f5..1a00054c 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="emoji-reactions">
-    <v-popover
+    <Popover
       v-for="(reaction) in emojiReactions"
       :key="reaction.name"
-      :popper-options="popperOptions"
       trigger="hover"
       placement="top"
+      :offset="{ y: 5 }"
     >
-
       <div
-        slot="popover"
+        slot="content"
         class="reacted-users"
       >
         <div v-if="accountsForEmoji[reaction.name].length">
@@ -34,6 +33,7 @@
         </div>
       </div>
       <button
+        slot="trigger"
         class="emoji-reaction btn btn-default"
         :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
@@ -42,7 +42,7 @@
         <span class="reaction-emoji">{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
-    </v-popover>
+    </Popover>
     <a
         v-if="tooManyReactions"
         @click="toggleShowAll"
@@ -78,6 +78,7 @@
     display: flex;
     flex-direction: column;
     margin-left: 0.5em;
+    min-width: 5em;
 
     img {
       width: 1em;
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 3f003425..f03112aa 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -47,7 +47,10 @@
         </button>
       </div>
     </div>
-    <div slot="trigger" class="button-icon">
+    <div
+      slot="trigger"
+      class="button-icon"
+    >
       <i class="icon-ellipsis" />
     </div>
   </Popover>
@@ -59,10 +62,6 @@
 @import '../../_variables.scss';
 @import '../popper/popper.scss';
 
-.dropdown-menu {
-  flex-shrink: 0;
-}
-
 .icon-ellipsis {
   cursor: pointer;
 
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 4ee08323..5918008f 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -4,7 +4,10 @@ const Popover = {
   props: [
     'trigger',
     'placement',
-    'show'
+    'boundTo',
+    'padding',
+    'offset',
+    'popoverClass'
   ],
   data () {
     return {
@@ -31,55 +34,77 @@ const Popover = {
       }
     },
     */
+    updateStyles () {
+      if (this.hidden) return { opacity: 0 }
+
+      // Popover will be anchored around this element
+      const anchorEl = this.$refs.trigger || 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 }
+      const content = this.$refs.content
+      const parentBounds = this.boundTo === 'container' && this.$el.offsetParent.getBoundingClientRect()
+      const padding = this.padding || {}
+      const bounds = this.boundTo === 'container'
+        ? {
+          xMin: parentBounds.left + (padding.left || 0),
+          xMax: parentBounds.right - (padding.right || 0),
+          yMin: 0 + (padding.top || 50),
+          yMax: window.innerHeight - (padding.bottom || 5)
+        } : {
+          xMin: 0 + (padding.left || 10),
+          xMax: window.innerWidth - (padding.right || 10),
+          yMin: 0 + (padding.top || 50),
+          yMax: window.innerHeight - (padding.bottom || 5)
+        }
+      let horizOffset = 0
+
+      console.log(bounds, content.offsetWidth)
+
+      // If overflowing from left, move it
+      if ((origin.x - content.offsetWidth * 0.5) < bounds.xMin) {
+        horizOffset = -(origin.x - content.offsetWidth * 0.5) + bounds.xMin
+      }
+
+      // If overflowing from right, move it
+      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > bounds.xMax) {
+        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - bounds.xMax
+      }
+
+      // Default to whatever user wished with placement prop
+      let usingTop = this.placement !== 'bottom'
+
+      // Handle special cases, first force to displaying on top if there's not space on bottom,
+      // regardless of what placement value was. Then check if there's not space on top, and
+      // force to bottom, again regardless of what placement value was.
+      if (origin.y + content.offsetHeight > bounds.yMax) usingTop = true
+      if (origin.y - content.offsetHeight < bounds.yMin) usingTop = false
+
+      const yOffset = (this.offset && this.offset.y) || 0
+      const vertAlign = usingTop
+        ? {
+          bottom: `${anchorEl.offsetHeight + yOffset}px`
+        }
+        : {
+          top: `${anchorEl.offsetHeight + yOffset}px`
+        }
+      this.styles = {
+        opacity: '100%',
+        left: `${(anchorEl.offsetLeft + anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset}px`,
+        ...vertAlign
+      }
+    },
     showPopover () {
+      if (this.hidden) this.$emit('show')
       this.hidden = false
-      this.$nextTick(function () {
-        if (this.hidden) return { opacity: 0 }
-
-        const anchorEl = this.$refs.trigger || this.$el
-        console.log(anchorEl)
-        const screenBox = anchorEl.getBoundingClientRect()
-        const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top}
-        const content = this.$refs.content
-        let horizOffset = 0
-
-        if ((origin.x - content.offsetWidth * 0.5) < 25) {
-          horizOffset += -(origin.x - content.offsetWidth * 0.5) + 25
-        }
-
-        console.log((origin.x + content.offsetWidth * 0.5), (window.innerWidth - 25))
-        if ((origin.x + content.offsetWidth * 0.5) > window.innerWidth - 25) {
-          horizOffset -= (origin.x + content.offsetWidth * 0.5) - (window.innerWidth - 25)
-        }
-        // Default to whatever user wished with placement prop
-        let usingTop = this.placement !== 'bottom'
-
-        // Handle special cases, first force to displaying on top if there's not space on bottom,
-        // regardless of what placement value was. Then check if there's not space on top, and
-        // force to bottom, again regardless of what placement value was.
-        if (origin.y + content.offsetHeight > (window.innerHeight - 25)) usingTop = true
-        if (origin.y - content.offsetHeight < 50) usingTop = false
-
-        const vertAlign = usingTop ?
-          {
-            bottom: `${anchorEl.offsetHeight}px`
-          } :
-          {
-            top: `${anchorEl.offsetHeight}px`
-          }
-        this.styles = {
-          opacity: '100%',
-          left: `${(anchorEl.offsetLeft + anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset}px`,
-          ...vertAlign
-        }
-      })
+      this.$nextTick(this.updateStyles)
     },
     hidePopover () {
+      if (!this.hidden) this.$emit('close')
       this.hidden = true
       this.styles = { opacity: 0 }
     },
     onMouseenter (e) {
-      console.log(this.trigger)
       if (this.trigger === 'hover') this.showPopover()
     },
     onMouseleave (e) {
@@ -97,15 +122,18 @@ const Popover = {
     onClickOutside (e) {
       if (this.hidden) return
       if (this.$el.contains(e.target)) return
-      console.log(e.target)
       this.hidePopover()
     }
   },
+  beforeUpdate () {
+    console.log('beforeupdate')
+    // if (!this.hidden) this.$nextTick(this.updateStyles)
+  },
   created () {
-    document.addEventListener("click", this.onClickOutside)
+    document.addEventListener('click', this.onClickOutside)
   },
   destroyed () {
-    document.removeEventListener("click", this.onClickOutside)
+    document.removeEventListener('click', this.onClickOutside)
     this.hidePopover()
   }
 }
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 273a0a69..d376f609 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -1,40 +1,26 @@
 <template>
-  <!-- This is for the weird portal shit
-  <div
-    @mouseenter="registerPopover"
-    @mouseleave="unregisterPopover"
-  >
-    <slot name="trigger"></slot>
-    <portal
-      v-if="targetId"
-      :to="targetId"
-    >
-      <slot name="content"></slot>
-    </portal>
-  </div>
-  -->
   <div
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
-    <div @click="onClick" ref="trigger">
-      <slot name="trigger"></slot>
+    <div
+      ref="trigger"
+      @click="onClick"
+    >
+      <slot name="trigger" />
     </div>
     <div
       v-if="display"
+      ref="content"
       :style="styles"
       class="popover"
+      :class="popoverClass"
     >
-      <div
-        ref="content"
+      <slot
+        name="content"
         class="popover-inner"
-      >
-      <!-- onSuccess is to mimic basic functionality of v-popover -->
-        <slot
-          name="content"
-          @onSuccess="hidePopover"
-        ></slot>
-      </div>
+        :close="hidePopover"
+      />
     </div>
   </div>
 </template>
@@ -48,15 +34,14 @@
   z-index: 8;
   position: absolute;
   min-width: 0;
+  transition: opacity 0.3s;
 
-  .popover-inner {
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-    box-shadow: var(--panelShadow);
-    border-radius: $fallback--btnRadius;
-    border-radius: var(--btnRadius, $fallback--btnRadius);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-  }
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
 
   .popover-arrow {
     width: 0;
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index a6cf5b94..19949563 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,34 +1,25 @@
+import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 
 const ReactButton = {
   props: ['status', 'loggedIn'],
   data () {
     return {
-      showTooltip: false,
-      filterWord: '',
-      popperOptions: {
-        modifiers: {
-          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-        }
-      }
+      filterWord: ''
     }
   },
+  components: {
+    Popover
+  },
   methods: {
-    openReactionSelect () {
-      this.showTooltip = true
-      this.filterWord = ''
-    },
-    closeReactionSelect () {
-      this.showTooltip = false
-    },
-    addReaction (event, emoji) {
+    addReaction (event, emoji, close) {
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
       } else {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
-      this.closeReactionSelect()
+      close()
     }
   },
   computed: {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index fb43ebaf..8613143f 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -1,13 +1,13 @@
 <template>
-  <v-popover
-    :popper-options="popperOptions"
-    :open="showTooltip"
-    trigger="manual"
+  <Popover
+    trigger="click"
     placement="top"
     class="react-button-popover"
-    @hide="closeReactionSelect"
   >
-    <div slot="popover">
+    <div
+      slot="content"
+      slot-scope="{close}"
+    >
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
@@ -19,7 +19,7 @@
           v-for="emoji in commonEmojis"
           :key="emoji"
           class="emoji-button"
-          @click="addReaction($event, emoji)"
+          @click="addReaction($event, emoji, close)"
         >
           {{ emoji }}
         </span>
@@ -28,7 +28,7 @@
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
-          @click="addReaction($event, emoji.replacement)"
+          @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
         </span>
@@ -37,14 +37,14 @@
     </div>
     <div
       v-if="loggedIn"
-      @click.prevent="openReactionSelect"
+      slot="trigger"
     >
       <i
         class="icon-smile button-icon add-reaction-button"
         :title="$t('tool_tip.add_reaction')"
       />
     </div>
-  </v-popover>
+  </Popover>
 </template>
 
 <script src="./react_button.js" ></script>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 83f07dac..66959251 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -177,6 +177,8 @@
                 <StatusPopover
                   v-if="!isPreview"
                   :status-id="status.in_reply_to_status_id"
+                  class="reply-to-popover"
+                  style="min-width: 0"
                 >
                   <a
                     class="reply-to"
@@ -564,11 +566,10 @@ $status-margin: 0.75em;
       align-items: stretch;
 
       > .reply-to-and-accountname > a {
+        overflow: hidden;
         max-width: 100%;
         text-overflow: ellipsis;
-        overflow: hidden;
         white-space: nowrap;
-        display: inline-block;
         word-break: break-all;
       }
     }
@@ -577,7 +578,6 @@ $status-margin: 0.75em;
       display: flex;
       height: 18px;
       margin-right: 0.5em;
-      overflow: hidden;
       max-width: 100%;
       .icon-reply {
         transform: scaleX(-1);
@@ -588,6 +588,10 @@ $status-margin: 0.75em;
       display: flex;
     }
 
+    .reply-to-popover {
+      min-width: 0;
+    }
+
     .reply-to {
       display: flex;
     }
@@ -595,6 +599,7 @@ $status-margin: 0.75em;
     .reply-to-text {
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
       margin: 0 0.4em 0 0.2em;
       color: $fallback--faint;
       color: var(--faint, $fallback--faint);
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 4055e5cb..35baac3e 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -5,15 +5,6 @@ const StatusPopover = {
   props: [
     'statusId'
   ],
-  data () {
-    return {
-      popperOptions: {
-        modifiers: {
-          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-        }
-      }
-    }
-  },
   computed: {
     status () {
       return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
@@ -28,6 +19,7 @@ const StatusPopover = {
       if (!this.status) {
         this.$store.dispatch('fetchStatus', this.statusId)
       }
+      console.log(this.$el.offsetParent)
     }
   }
 }
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 9f37e4e7..04de1e34 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,9 +1,16 @@
 <template>
-  <Popover trigger="hover">
+  <Popover
+    trigger="hover"
+    bound-to="container"
+    popover-class="status-popover"
+    @show="enter"
+  >
     <template slot="trigger">
       <slot />
     </template>
-    <div slot="content" class="status-popover">
+    <div
+      slot="content"
+    >
       <Status
         v-if="status"
         :is-preview="true"
@@ -31,16 +38,14 @@
   max-width: 95%;
   margin: 0.5em 0;
 
-  .popover-inner {
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-style: solid;
-    border-width: 1px;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: var(--popupShadow);
-  }
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
 
   .popover-arrow::before {
     position: absolute;
diff --git a/src/main.js b/src/main.js
index d74ff63a..baf73ac8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,7 +19,6 @@ import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
 import pollsModule from './modules/polls.js'
 import postStatusModule from './modules/postStatus.js'
-import popoverModule from './modules/popover.js'
 
 import VueI18n from 'vue-i18n'
 
@@ -90,8 +89,7 @@ const persistedStateOptions = {
       oauthTokens: oauthTokensModule,
       reports: reportsModule,
       polls: pollsModule,
-      postStatus: postStatusModule,
-      popover: popoverModule
+      postStatus: postStatusModule
     },
     plugins: [persistedState, pushNotifications],
     strict: false // Socket modifies itself, let's ignore this for now.
diff --git a/src/modules/popover.js b/src/modules/popover.js
deleted file mode 100644
index 5b01ccbb..00000000
--- a/src/modules/popover.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { omit } from 'lodash'
-import { set } from 'vue'
-
-const popover = {
-  state: {
-    popovers: {}
-  },
-  mutations: {
-    registerPopover (state, { id, el }) {
-      set(state.popovers, id, el)
-    },
-    unregisterPopover (state, { id }) {
-      state.popovers = omit(state.popovers, id)
-    }
-  },
-  actions: {
-    registerPopover (store, el) {
-      // Generate unique id, it will be used to link portal and portal-target
-      // popover-target will make portal targets for each registered popover
-      // el will be used by popover target to put popovers in their places.
-      let id = Math.floor(Math.random() * 1000000).toString()
-      store.commit('registerPopover', { id, el })
-      return id
-    },
-    unregisterPopover (store, id) {
-      store.commit('unregisterPopover', { id })
-    }
-  }
-}
-
-export default popover

From 7ac1a4a9fe61f7fa5c61006b45485aaf28098c2f Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sun, 16 Feb 2020 09:58:05 +0200
Subject: [PATCH 3/8] remove v-tooltip completely

---
 package.json                                  |   1 -
 .../moderation_tools/moderation_tools.js      |   5 +-
 .../moderation_tools/moderation_tools.vue     |  13 +--
 src/components/popover/popover.js             | 104 +++++++++---------
 .../status_popover/status_popover.vue         |   4 +-
 src/components/user_card/user_card.vue        |   2 +-
 src/main.js                                   |   8 --
 yarn.lock                                     |  19 ----
 8 files changed, 65 insertions(+), 91 deletions(-)

diff --git a/package.json b/package.json
index 5c7fa31e..542086b4 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "portal-vue": "^2.1.4",
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
-    "v-tooltip": "^2.0.2",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 757166ed..3a8432db 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -1,4 +1,5 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popover from '../popover/popover.vue'
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -14,7 +15,6 @@ const ModerationTools = {
   ],
   data () {
     return {
-      showDropDown: false,
       tags: {
         FORCE_NSFW,
         STRIP_MEDIA,
@@ -28,7 +28,8 @@ const ModerationTools = {
     }
   },
   components: {
-    DialogModal
+    DialogModal,
+    Popover
   },
   computed: {
     tagsSet () {
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 006d6373..c6a0dbd2 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,13 +1,12 @@
 <template>
   <div>
-    <v-popover
+    <Popover
       trigger="click"
       class="moderation-tools-popover"
-      placement="bottom-end"
-      @show="showDropDown = true"
-      @hide="showDropDown = false"
+      placement="bottom"
+      :offset="{ y: 5 }"
     >
-      <div slot="popover">
+      <div slot="content">
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -122,12 +121,12 @@
         </div>
       </div>
       <button
+        slot="trigger"
         class="btn btn-default btn-block"
-        :class="{ pressed: showDropDown }"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
-    </v-popover>
+    </Popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5918008f..3e67f36a 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -12,7 +12,8 @@ const Popover = {
   data () {
     return {
       hidden: true,
-      styles: { opacity: 0 }
+      styles: { opacity: 0 },
+      oldSize: { width: 0, height: 0 }
     }
   },
   computed: {
@@ -21,19 +22,6 @@ const Popover = {
     }
   },
   methods: {
-    /*
-    registerPopover (e) {
-      if (!this.targetId) {
-        this.$store.dispatch('registerPopover', e.target).then(id => this.targetId = id)
-      }
-    },
-    unregisterPopover () {
-      if (this.targetId) {
-        this.$store.dispatch('unregisterPopover', this.targetId)
-        this.targetId = null
-      }
-    },
-    */
     updateStyles () {
       if (this.hidden) return { opacity: 0 }
 
@@ -43,32 +31,40 @@ const Popover = {
       // Screen position of the origin point for popover
       const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
       const content = this.$refs.content
-      const parentBounds = this.boundTo === 'container' && this.$el.offsetParent.getBoundingClientRect()
+      // Minor optimization, don't call a slow reflow call if we don't have to
+      const parentBounds =
+        (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
+        this.$el.offsetParent.getBoundingClientRect()
       const padding = this.padding || {}
-      const bounds = this.boundTo === 'container'
-        ? {
-          xMin: parentBounds.left + (padding.left || 0),
-          xMax: parentBounds.right - (padding.right || 0),
-          yMin: 0 + (padding.top || 50),
-          yMax: window.innerHeight - (padding.bottom || 5)
-        } : {
-          xMin: 0 + (padding.left || 10),
-          xMax: window.innerWidth - (padding.right || 10),
-          yMin: 0 + (padding.top || 50),
-          yMax: window.innerHeight - (padding.bottom || 5)
-        }
-      let horizOffset = 0
 
-      console.log(bounds, content.offsetWidth)
-
-      // If overflowing from left, move it
-      if ((origin.x - content.offsetWidth * 0.5) < bounds.xMin) {
-        horizOffset = -(origin.x - content.offsetWidth * 0.5) + bounds.xMin
+      // What are the screen bounds for the popover? Viewport vs container
+      // when using viewport, using default padding values to dodge the navbar
+      const xBounds = this.boundTo.x === 'container' ? {
+        min: parentBounds.left + (padding.left || 0),
+        max: parentBounds.right - (padding.right || 0)
+      } : {
+        min: 0 + (padding.left || 10),
+        max: window.innerWidth - (padding.right || 10)
       }
 
-      // If overflowing from right, move it
-      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > bounds.xMax) {
-        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - bounds.xMax
+      const yBounds = this.boundTo.y === 'container' ? {
+        min: parentBounds.top + (padding.top || 0),
+        max: parentBounds.bottom - (padding.bottom || 0)
+      } : {
+        min: 0 + (padding.top || 50),
+        max: window.innerHeight - (padding.bottom || 5)
+      }
+
+      let horizOffset = 0
+
+      // If overflowing from left, move it so that it doesn't
+      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
+        horizOffset = -(origin.x - content.offsetWidth * 0.5) + xBounds.min
+      }
+
+      // If overflowing from right, move it so that it doesn't
+      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
+        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
       }
 
       // Default to whatever user wished with placement prop
@@ -77,21 +73,20 @@ const Popover = {
       // Handle special cases, first force to displaying on top if there's not space on bottom,
       // regardless of what placement value was. Then check if there's not space on top, and
       // force to bottom, again regardless of what placement value was.
-      if (origin.y + content.offsetHeight > bounds.yMax) usingTop = true
-      if (origin.y - content.offsetHeight < bounds.yMin) usingTop = false
+      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
+      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
 
       const yOffset = (this.offset && this.offset.y) || 0
-      const vertAlign = usingTop
-        ? {
-          bottom: `${anchorEl.offsetHeight + yOffset}px`
-        }
-        : {
-          top: `${anchorEl.offsetHeight + yOffset}px`
-        }
+      const translateY = usingTop
+        ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
+        : yOffset + yOffset
+
+      const xOffset = (this.offset && this.offset.x) || 0
+      const translateX = (+anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
+
       this.styles = {
-        opacity: '100%',
-        left: `${(anchorEl.offsetLeft + anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset}px`,
-        ...vertAlign
+        opacity: 1,
+        transform: `translate(${Math.floor(translateX)}px, ${Math.floor(translateY)}px)`
       }
     },
     showPopover () {
@@ -125,9 +120,16 @@ const Popover = {
       this.hidePopover()
     }
   },
-  beforeUpdate () {
-    console.log('beforeupdate')
-    // if (!this.hidden) this.$nextTick(this.updateStyles)
+  updated () {
+    // 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 }
+    }
   },
   created () {
     document.addEventListener('click', this.onClickOutside)
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 04de1e34..518e3f69 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,8 +1,9 @@
 <template>
   <Popover
     trigger="hover"
-    bound-to="container"
     popover-class="status-popover"
+    :bound-to="{ x: 'container' }"
+    :offset="{ x: 0, y: 5 }"
     @show="enter"
   >
     <template slot="trigger">
@@ -36,7 +37,6 @@
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  margin: 0.5em 0;
 
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 93d55fff..288c4232 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -184,7 +184,7 @@
             </button>
           </div>
           <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot;"
+            v-if="loggedIn.role === &quot;admin&quot; || loggedIn"
             :user="user"
           />
         </div>
diff --git a/src/main.js b/src/main.js
index baf73ac8..be4213fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -31,7 +31,6 @@ import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
-import VTooltip from 'v-tooltip'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -44,13 +43,6 @@ Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
-Vue.use(VTooltip, {
-  popover: {
-    defaultTrigger: 'hover click',
-    defaultContainer: false,
-    defaultOffset: 5
-  }
-})
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
diff --git a/yarn.lock b/yarn.lock
index b794042f..0defefcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5941,11 +5941,6 @@ pngjs@^3.3.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
 
-popper.js@^1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
-  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
-
 portal-vue@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"
@@ -7823,15 +7818,6 @@ v-click-outside@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.3.tgz#b7297abe833a439dc0895e6418a494381e64b5e7"
 
-v-tooltip@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.2.tgz#8610d9eece2cc44fd66c12ef2f12eec6435cab9b"
-  integrity sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==
-  dependencies:
-    lodash "^4.17.11"
-    popper.js "^1.15.0"
-    vue-resize "^0.4.5"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -7906,11 +7892,6 @@ vue-loader@^14.0.0:
     vue-style-loader "^4.0.1"
     vue-template-es2015-compiler "^1.6.0"
 
-vue-resize@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
-  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
-
 vue-router@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"

From 10fc666a49e5d2992e7f22908d285ba1934b7093 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 17 Feb 2020 10:14:06 +0200
Subject: [PATCH 4/8] separate bounds x/y

---
 src/components/popover/popover.js             |  6 +-
 src/components/popover/popover.vue            | 82 -------------------
 src/components/popper/popper.scss             |  0
 .../status_popover/status_popover.js          |  1 -
 .../status_popover/status_popover.vue         | 22 -----
 5 files changed, 3 insertions(+), 108 deletions(-)
 delete mode 100644 src/components/popper/popper.scss

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 3e67f36a..5b07b261 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -32,14 +32,14 @@ const Popover = {
       const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
       const content = this.$refs.content
       // Minor optimization, don't call a slow reflow call if we don't have to
-      const parentBounds =
+      const parentBounds = this.boundTo &&
         (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
         this.$el.offsetParent.getBoundingClientRect()
       const padding = this.padding || {}
 
       // What are the screen bounds for the popover? Viewport vs container
       // when using viewport, using default padding values to dodge the navbar
-      const xBounds = this.boundTo.x === 'container' ? {
+      const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
         min: parentBounds.left + (padding.left || 0),
         max: parentBounds.right - (padding.right || 0)
       } : {
@@ -47,7 +47,7 @@ const Popover = {
         max: window.innerWidth - (padding.right || 10)
       }
 
-      const yBounds = this.boundTo.y === 'container' ? {
+      const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
         min: parentBounds.top + (padding.top || 0),
         max: parentBounds.bottom - (padding.bottom || 0)
       } : {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index d376f609..2d1219f2 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -42,88 +42,6 @@
   border-radius: var(--btnRadius, $fallback--btnRadius);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
-
-  .popover-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: $fallback--bg;
-    border-color: var(--bg, $fallback--bg);
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .popover-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .popover-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s, visibility .15s;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity .15s;
-  }
 }
 
 .dropdown-menu {
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 35baac3e..cb55f67e 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -19,7 +19,6 @@ const StatusPopover = {
       if (!this.status) {
         this.$store.dispatch('fetchStatus', this.statusId)
       }
-      console.log(this.$el.offsetParent)
     }
   }
 }
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 518e3f69..63436ee8 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -47,28 +47,6 @@
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   box-shadow: var(--popupShadow);
 
-  .popover-arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom-start"] .popover-arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top-start"] .popover-arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
-
   .status-el.status-el {
     border: none;
   }

From 3e971f0f25492c0dfee2f9e737fa1e088ab1e247 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Mon, 17 Feb 2020 11:14:22 +0200
Subject: [PATCH 5/8] remove popper references

---
 src/components/account_actions/account_actions.vue   | 1 -
 src/components/emoji_reactions/emoji_reactions.js    | 7 +------
 src/components/extra_buttons/extra_buttons.vue       | 1 -
 src/components/moderation_tools/moderation_tools.vue | 1 -
 4 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 1fd00a1e..7b1f5cda 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -65,7 +65,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 .account-actions {
   margin: 0 .8em;
 }
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index bd2ec826..ae7f53be 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -11,12 +11,7 @@ const EmojiReactions = {
   },
   props: ['status'],
   data: () => ({
-    showAll: false,
-    popperOptions: {
-      modifiers: {
-        preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-      }
-    }
+    showAll: false
   }),
   computed: {
     tooManyReactions () {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index f03112aa..a41ca844 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -60,7 +60,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 
 .icon-ellipsis {
   cursor: pointer;
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index c6a0dbd2..4c350ebd 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -159,7 +159,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 
 .menu-checkbox {
   float: right;

From b19d51c3dc937758a41be3a72494b997900b598c Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 17 Feb 2020 11:34:56 +0200
Subject: [PATCH 6/8] fix mistakes

---
 src/components/extra_buttons/extra_buttons.vue | 2 +-
 src/components/user_card/user_card.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a41ca844..8dc37d2b 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,7 +2,7 @@
   <Popover
     v-if="canDelete || canMute || canPin"
     trigger="click"
-    placement="bottom"
+    placement="top"
     class="extra-button-popover"
   >
     <div slot="content">
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 288c4232..93d55fff 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -184,7 +184,7 @@
             </button>
           </div>
           <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot; || loggedIn"
+            v-if="loggedIn.role === &quot;admin&quot;"
             :user="user"
           />
         </div>

From f007a795ac51af72b258ccebe6e4e12fa7f02668 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 17 Feb 2020 11:48:14 +0200
Subject: [PATCH 7/8] remove unused popover target from portal experiment

---
 src/components/popover/popover.js         |  2 +-
 src/components/popover/popover_target.js  | 23 ---------------------
 src/components/popover/popover_target.vue | 25 -----------------------
 3 files changed, 1 insertion(+), 49 deletions(-)
 delete mode 100644 src/components/popover/popover_target.js
 delete mode 100644 src/components/popover/popover_target.vue

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5b07b261..3732c42e 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -82,7 +82,7 @@ const Popover = {
         : yOffset + yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = (+anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
+      const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
 
       this.styles = {
         opacity: 1,
diff --git a/src/components/popover/popover_target.js b/src/components/popover/popover_target.js
deleted file mode 100644
index 60bed5c7..00000000
--- a/src/components/popover/popover_target.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const PopoverTarget = {
-  name: 'PopoverTarget',
-  computed: {
-    ids () {
-      const popovers = this.$store.state.popover.popovers
-      return Object.keys(popovers)
-    },
-    styles () {
-      return this.ids.reduce((acc, id) => {
-        const el = this.$store.state.popover.popovers[id]
-        const box = el.getBoundingClientRect()
-        acc[id] = {
-          top: `${box.y}px`,
-          left: `${box.x}px`
-        }
-        console.log(acc)
-        return acc
-      }, {})
-    }
-  }
-}
-
-export default PopoverTarget
diff --git a/src/components/popover/popover_target.vue b/src/components/popover/popover_target.vue
deleted file mode 100644
index f012823c..00000000
--- a/src/components/popover/popover_target.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="popover-targets">
-    <portal-target
-      v-for="id in ids"
-      :key="id"
-      :name="id"
-      :style="styles[id]"
-      class="popover-target"
-    />
-  </div>
-</template>
-<script src="./popover_target.js" />
-<style lang="scss">
-
-.popover-targets {
-  top: 0;
-  left: 0;
-  position: fixed;
-}
-
-.popover-target {
-  position: fixed;
-}
-
-</style>

From 0723c0757198d5dcb3b54e1cdd362cb4d2bf52ef Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 17 Feb 2020 12:03:29 +0200
Subject: [PATCH 8/8] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c011835c..1598e93c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Registration fixed
 - Deactivation of remote accounts from frontend
 - Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
+- Improved performance of anything that uses popovers (most notably statuses)
 
 ## [1.1.7 and earlier] - 2019-12-14
 ### Added