fix(client): use portal-vue for tooltips

client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.21.2",
+    "portal-vue": "^2.1.7",
     "vue": "^2.6.12",
     "vue-content-loader": "^0.2.3",
     "vue-meta": "^2.4.0",

client/src/App.vue

@@ -3,6 +3,7 @@
     <SVGContainer />
     <NotificationsContainer />
     <RunesContainer />
+    <portal-target name="tooltip-destination" />
     <component :is="layout">
       <router-view />
     </component>

client/src/components/Common/Tooltip.vue

@@ -13,6 +13,7 @@
     </div>
 
     <!-- tooltip content -->
+    <portal v-if="isOpen" to="tooltip-destination">
       <div
         v-show="isOpen"
         ref="content"
@@ -21,6 +22,7 @@
       >
         <slot></slot>
       </div>
+    </portal>
   </div>
 </template>
  

client/src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueAxios from './plugins/axios'
 import VueMeta from 'vue-meta'
 import { VuePlausible } from 'vue-plausible'
+import PortalVue from 'portal-vue'
 
 
 import '@/assets/css/main.css'
@@ -19,6 +20,7 @@ Vue.use(VuePlausible, {
 })
 Vue.$plausible.enableAutoPageviews()
 Vue.use(VueMeta)
+Vue.use(PortalVue)
 
 Vue.filter('capitalize', (value) => {
   return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase()