separate bounds x/y

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)
       } : {

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 {

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)
     }
   }
 }

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;
   }