migrate Popper to v-popover

src/components/popper/popper.scss

@@ -20,7 +20,6 @@
     margin: 5px;
     border-color: $fallback--bg;
     border-color: var(--bg, $fallback--bg);
-    z-index: 1;
   }
 
   &[x-placement^="top"] {
@@ -31,7 +30,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      bottom: -5px;
+      bottom: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -46,7 +45,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-top-color: transparent !important;
-      top: -5px;
+      top: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -61,7 +60,7 @@
       border-left-color: transparent !important;
       border-top-color: transparent !important;
       border-bottom-color: transparent !important;
-      left: -5px;
+      left: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;
@@ -76,7 +75,7 @@
       border-top-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      right: -5px;
+      right: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;

src/components/status/status.js

@@ -1,4 +1,3 @@
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -290,7 +289,6 @@ const Status = {
     }
   },
   components: {
-    Popper,
     Attachment,
     FavoriteButton,
     RetweetButton,

src/components/status/status.vue

@@ -174,51 +174,47 @@
                 v-if="isReply"
                 class="reply-to-and-accountname"
               >
-                <Popper
+                <v-popover
+                  v-if="!isPreview"
                   ref="statusPreviewPopper"
-                  :options="{
+                  popoverClass="status-popover"
-                    placement: 'top-start',
+                  placement="top-start"
-                    modifiers: {
+                  trigger="hover"
-                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
+                  :offset="5"
-                    }
+                  :container="false"
-                  }"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
-                  <div class="popper-wrapper status-preview">
+                  <div slot="popover">
+                    <status
+                      v-if="preview"
+                      :is-preview="true"
+                      :statusoid="preview"
+                      :compact="true"
+                    />
                     <div
-                      class="popper-wrapper-inner"
+                      v-else
-                      @mouseover.prevent.stop
+                      class="status-preview-loading"
-                      @focus.prevent.stop
                     >
-                      <status
+                      <i class="icon-spin4 animate-spin" />
-                        v-if="preview"
-                        :is-preview="true"
-                        :statusoid="preview"
-                        :compact="true"
-                      />
-                      <div
-                        v-else
-                        class="status-preview-loading"
-                      >
-                        <i class="icon-spin4 animate-spin" />
-                      </div>
                     </div>
                   </div>
 
                   <a
-                    slot="reference"
                     class="reply-to"
                     href="#"
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i
+                    <i class="button-icon icon-reply" />
-                      v-if="!isPreview"
-                      class="button-icon icon-reply"
-                    />
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
-                </Popper>
+                </v-popover>
+                <span
+                  v-else
+                  class="reply-to"
+                >
+                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                </span>
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -604,6 +600,8 @@ $status-margin: 0.75em;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0 0.4em 0 0.2em;
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
     }
 
     .replies-separator {
@@ -863,21 +861,43 @@ a.unmute {
   }
 }
 
-.popper-wrapper.status-preview {
+.tooltip.popover.status-popover {
-  font-size: 1rem;
+  .popover-inner {
-  background-color: $fallback--bg;
+    font-size: 1rem;
-  background-color: var(--bg, $fallback--bg);
+    border-color: $fallback--border;
-  border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
-  border-color: var(--border, $fallback--border);
+    border-style: solid;
-  border-style: solid;
+    border-width: 1px;
-  border-width: 1px;
+    border-radius: $fallback--tooltipRadius;
-  border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--popupShadow);
-  box-shadow: var(--popupShadow);
+    min-width: 15em;
-  min-width: 15em;
+    max-width: 95%;
-  max-width: 95%;
+    margin-left: 0.5em;
-  margin-left: 0.5em;
+  }
+
+  .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;
@@ -891,28 +911,6 @@ a.unmute {
       font-size: 2em;
     }
   }
-
-  .popper__arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom"] .popper__arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top"] .popper__arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
 }
 
 .favs-repeated-users {