From a5cdebe1a80e4abefde5729948566b0c78166a25 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Mon, 26 Aug 2024 10:32:34 -0400
Subject: [PATCH] Adjust toast location to avoid overlap with side toolbar and
 menu (#637)

---
 src/components/toast/GlobalToast.vue | 36 +++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/toast/GlobalToast.vue b/src/components/toast/GlobalToast.vue
index 4bc2780fe..b082bc4b8 100644
--- a/src/components/toast/GlobalToast.vue
+++ b/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>