Fix popouts not working (#3028)

* Attempt at fixing popouts? no idea if will work

* Try with no theme?

* Revert "Try with no theme?"

This reverts commit 7fb3a6c6a6233d091d235364d072ffbbc7b7250a.

* Try to remove triggers from theme

* Remove duplicate plugin

* Fix version issue

* Try to remove theme and use default theme

* Add back theme for later fixing

* Lint

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

apps/app-frontend/src/main.js

@@ -44,7 +44,6 @@ app.use(FloatingVue, {
       placement: 'bottom-end',
       instantMove: true,
       distance: 8,
-      triggers: ['click'],
     },
   },
 })

apps/frontend/package.json

@@ -46,7 +46,7 @@
     "ansi-to-html": "^0.7.2",
     "dayjs": "^1.11.7",
     "dompurify": "^3.1.7",
-    "floating-vue": "2.0.0-beta.20",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
     "iso-3166-1": "^2.1.1",

apps/frontend/src/plugins/floating-vue.js

@@ -1,4 +1,5 @@
 import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css";
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(FloatingVue, {
@@ -8,7 +9,6 @@ export default defineNuxtPlugin((nuxtApp) => {
         placement: "bottom-end",
         instantMove: true,
         distance: 8,
-        triggers: ["click"],
       },
     },
   });

apps/frontend/src/plugins/tooltip.js

@@ -1,6 +0,0 @@
-import FloatingVue from "floating-vue";
-import "floating-vue/dist/style.css";
-
-export default defineNuxtPlugin(({ vueApp }) => {
-  vueApp.use(FloatingVue);
-});