Adjust toast location to avoid overlap with side toolbar and menu (#637)

src/components/toast/GlobalToast.vue

@@ -3,13 +3,15 @@
 </template>
 
 <script setup lang="ts">
+import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
-import { watch } from 'vue'
+import { nextTick, watch } from 'vue'
 
 const toast = useToast()
 const toastStore = useToastStore()
+const settingStore = useSettingStore()
 
 watch(
   () => toastStore.messagesToAdd,
@@ -50,4 +52,36 @@ watch(
     }
   }
 )
+
+function updateToastPosition() {
+  const styleElement =
+    document.getElementById('dynamic-toast-style') || createStyleElement()
+  const rect = document
+    .querySelector('.graph-canvas-container')
+    .getBoundingClientRect()
+  styleElement.textContent = `
+    .p-toast.p-component.p-toast-top-right {
+      top: ${rect.top + 20}px !important;
+      right: ${window.innerWidth - (rect.left + rect.width) + 20}px !important;
+    }
+  `
+}
+
+function createStyleElement() {
+  const style = document.createElement('style')
+  style.id = 'dynamic-toast-style'
+  document.head.appendChild(style)
+  return style
+}
+
+watch(
+  () => settingStore.get('Comfy.UseNewMenu'),
+  () => nextTick(updateToastPosition),
+  { immediate: true }
+)
+watch(
+  () => settingStore.get('Comfy.Sidebar.Location'),
+  () => nextTick(updateToastPosition),
+  { immediate: true }
+)
 </script>