diff --git a/apps/app-frontend/src/main.js b/apps/app-frontend/src/main.js
index 54eecc8d..ba6d3f49 100644
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -44,7 +44,6 @@ app.use(FloatingVue, {
placement: 'bottom-end',
instantMove: true,
distance: 8,
- triggers: ['click'],
},
},
})
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 61fd52b2..52faf132 100644
--- a/apps/frontend/package.json
+++ b/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",
diff --git a/apps/frontend/src/plugins/floating-vue.js b/apps/frontend/src/plugins/floating-vue.js
index 28357ea3..8ea6c4c8 100644
--- a/apps/frontend/src/plugins/floating-vue.js
+++ b/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"],
},
},
});
diff --git a/apps/frontend/src/plugins/tooltip.js b/apps/frontend/src/plugins/tooltip.js
deleted file mode 100644
index 7453897e..00000000
--- a/apps/frontend/src/plugins/tooltip.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import FloatingVue from "floating-vue";
-import "floating-vue/dist/style.css";
-
-export default defineNuxtPlugin(({ vueApp }) => {
- vueApp.use(FloatingVue);
-});
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index 752fd876..9b22f853 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -1205,22 +1205,23 @@ select {
border-top-right-radius: var(--radius-md) !important;
}
+.v-popper--theme-dropdown,
.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
.v-popper__inner {
- border: 1px solid var(--color-button-bg);
- padding: var(--gap-sm);
- width: fit-content;
- border-radius: var(--radius-md);
- background-color: var(--color-raised-bg);
- box-shadow: var(--shadow-floating);
+ border: 1px solid var(--color-button-bg) !important;
+ padding: var(--gap-sm) !important;
+ width: fit-content !important;
+ border-radius: var(--radius-md) !important;
+ background-color: var(--color-raised-bg) !important;
+ box-shadow: var(--shadow-floating) !important;
}
.v-popper__arrow-outer {
- border-color: var(--color-button-bg);
+ border-color: var(--color-button-bg) !important;
}
.v-popper__arrow-inner {
- border-color: var(--color-raised-bg);
+ border-color: var(--color-raised-bg) !important;
}
}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 57141cb0..cb02ad56 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -31,7 +31,7 @@
"@types/markdown-it": "^14.1.1",
"apexcharts": "^3.44.0",
"dayjs": "^1.11.10",
- "floating-vue": "2.0.0-beta.24",
+ "floating-vue": "^5.2.2",
"highlight.js": "^11.9.0",
"markdown-it": "^13.0.2",
"qrcode.vue": "^3.4.1",
diff --git a/packages/ui/src/components/base/PopoutMenu.vue b/packages/ui/src/components/base/PopoutMenu.vue
index 6bea21c5..64eaadf0 100644
--- a/packages/ui/src/components/base/PopoutMenu.vue
+++ b/packages/ui/src/components/base/PopoutMenu.vue
@@ -1,7 +1,6 @@
-
-
+
+
-
+