fix(ToolTips): no more overflow issues with Confirm component

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -465,9 +465,14 @@ a {
 
 .tippy-box[data-theme~="confirm"] {
 	background-color: var(--red);
-	padding: 5px 10px;
+
+	.tippy-content {
+		padding: 0;
+	}
 
 	a {
+		padding: 15px;
+		line-height: 25px;
 		color: var(--white);
 		border-bottom: 0;
 		font-size: 15px;

frontend/src/components/Confirm.vue

@@ -6,6 +6,7 @@
 		theme="confirm"
 		ref="confirm"
 		trigger="click"
+		:append-to="body"
 		@onHide="clickedOnce = false"
 		@hide="delayedHide()"
 	>
@@ -31,9 +32,11 @@ export default {
 	emits: ["confirm"],
 	data() {
 		return {
-			clickedOnce: false
+			clickedOnce: false,
+			body: document.body
 		};
 	},
+
 	methods: {
 		// eslint-disable-next-line no-unused-vars
 		confirm(event) {
@@ -49,6 +52,7 @@ export default {
 
 			this.clickedOnce = false;
 			this.$emit("confirm");
+			this.$refs.confirm.tippy.hide();
 		},
 		delayedHide() {
 			setTimeout(() => {