fix: remove modal when navigating back

src/components/CreateGroupDialog.vue

@@ -33,15 +33,27 @@
 import { Modal } from "bootstrap";
 
 export default {
+    beforeRouteLeave(to, from, next) {
+        this.cleanupModal();
+        next();
+    },
     props: {},
     emits: [ "added" ],
     data: () => ({
         modal: null,
         groupName: null,
     }),
+    watch: {
+        $route(to, from) {
+            this.cleanupModal();
+        }
+    },
     mounted() {
         this.modal = new Modal(this.$refs.modal);
     },
+    beforeUnmount() {
+        this.cleanupModal();
+    },
     methods: {
         /**
          * Show the confirm dialog
@@ -58,6 +70,22 @@ export default {
             this.$emit("added", this.groupName);
             this.modal.hide();
         },
+        /**
+         * Clean up modal and restore scroll behavior
+         * @returns {void}
+         */
+        cleanupModal() {
+            if (this.modal) {
+                try {
+                    this.modal.hide();
+                } catch (e) {
+                    console.warn("Modal hide failed:", e);
+                }
+            }
+            document.body.classList.remove("modal-open");
+            document.body.style.paddingRight = "";
+            document.body.style.overflow = "";
+        }
     },
 };
 </script>

src/components/NotificationDialog.vue

@@ -80,6 +80,10 @@ export default {
     components: {
         Confirm,
     },
+    beforeRouteLeave(to, from, next) {
+        this.cleanupModal();
+        next();
+    },
     props: {},
     emits: [ "added" ],
     data() {
@@ -226,10 +230,16 @@ export default {
                 this.notification.name = this.getUniqueDefaultName(to);
             }
         },
+        $route(to, from) {
+            this.cleanupModal();
+        }
     },
     mounted() {
         this.modal = new Modal(this.$refs.modal);
     },
+    beforeUnmount() {
+        this.cleanupModal();
+    },
     methods: {
 
         /**
@@ -334,6 +344,23 @@ export default {
                 });
             } while (this.$root.notificationList.find(it => it.name === name));
             return name;
+        },
+
+        /**
+         * Clean up modal and restore scroll behavior
+         * @returns {void}
+         */
+        cleanupModal() {
+            if (this.modal) {
+                try {
+                    this.modal.hide();
+                } catch (e) {
+                    console.warn("Modal hide failed:", e);
+                }
+            }
+            document.body.classList.remove("modal-open");
+            document.body.style.paddingRight = "";
+            document.body.style.overflow = "";
         }
     },
 };

src/components/ProxyDialog.vue

@@ -105,6 +105,10 @@ export default {
     components: {
         Confirm,
     },
+    beforeRouteLeave(to, from, next) {
+        this.cleanupModal();
+        next();
+    },
     props: {},
     emits: [ "added" ],
     data() {
@@ -125,11 +129,17 @@ export default {
             }
         };
     },
-
+    watch: {
+        $route(to, from) {
+            this.cleanupModal();
+        }
+    },
     mounted() {
         this.modal = new Modal(this.$refs.modal);
     },
-
+    beforeUnmount() {
+        this.cleanupModal();
+    },
     methods: {
         /**
          * Show dialog to confirm deletion
@@ -209,6 +219,23 @@ export default {
                 }
             });
         },
+
+        /**
+         * Clean up modal and restore scroll behavior
+         * @returns {void}
+         */
+        cleanupModal() {
+            if (this.modal) {
+                try {
+                    this.modal.hide();
+                } catch (e) {
+                    console.warn("Modal hide failed:", e);
+                }
+            }
+            document.body.classList.remove("modal-open");
+            document.body.style.paddingRight = "";
+            document.body.style.overflow = "";
+        }
     },
 };
 </script>

src/components/TagsManager.vue

@@ -155,6 +155,10 @@ export default {
         Tag,
         VueMultiselect,
     },
+    beforeRouteLeave(to, from, next) {
+        this.cleanupModal();
+        next();
+    },
     props: {
         /**
          * Array of tags to be pre-selected
@@ -244,10 +248,18 @@ export default {
             };
         },
     },
+    watch: {
+        $route(to, from) {
+            this.cleanupModal();
+        }
+    },
     mounted() {
         this.modal = new Modal(this.$refs.modal);
         this.getExistingTags();
     },
+    beforeUnmount() {
+        this.cleanupModal();
+    },
     methods: {
         /**
          * Show the add tag dialog
@@ -459,6 +471,22 @@ export default {
             this.newTags = [];
             this.deleteTags = [];
             this.processing = false;
+        },
+        /**
+         * Clean up modal and restore scroll behavior
+         * @returns {void}
+         */
+        cleanupModal() {
+            if (this.modal) {
+                try {
+                    this.modal.hide();
+                } catch (e) {
+                    console.warn("Modal hide failed:", e);
+                }
+            }
+            document.body.classList.remove("modal-open");
+            document.body.style.paddingRight = "";
+            document.body.style.overflow = "";
         }
     },
 };