From d4864deac5db325caed895a8eab316142bbedfcc Mon Sep 17 00:00:00 2001
From: IMB11 <hendersoncal117@gmail.com>
Date: Thu, 19 Jun 2025 16:18:10 +0100
Subject: [PATCH] fix: intercom bubble colliding with notifications (#3810)

---
 .../src/components/ui/Notifications.vue       | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/Notifications.vue b/apps/frontend/src/components/ui/Notifications.vue
index 563cf23f4..eae6faace 100644
--- a/apps/frontend/src/components/ui/Notifications.vue
+++ b/apps/frontend/src/components/ui/Notifications.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="vue-notification-group experimental-styles-within">
+  <div
+    class="vue-notification-group experimental-styles-within"
+    :class="{ 'intercom-present': isIntercomPresent }"
+  >
     <transition-group name="notifs">
       <div
         v-for="(item, index) in notifications"
@@ -80,6 +83,8 @@ import {
 } from "@modrinth/assets";
 const notifications = useNotifications();
 
+const isIntercomPresent = ref(false);
+
 function stopTimer(notif) {
   clearTimeout(notif.timer);
 }
@@ -106,6 +111,27 @@ const createNotifText = (notif) => {
   return text;
 };
 
+function checkIntercomPresence() {
+  isIntercomPresent.value = !!document.querySelector(".intercom-lightweight-app");
+}
+
+onMounted(() => {
+  checkIntercomPresence();
+
+  const observer = new MutationObserver(() => {
+    checkIntercomPresence();
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  onBeforeUnmount(() => {
+    observer.disconnect();
+  });
+});
+
 function copyToClipboard(notif) {
   const text = createNotifText(notif);
 
@@ -130,6 +156,10 @@ function copyToClipboard(notif) {
     bottom: 0.75rem;
   }
 
+  &.intercom-present {
+    bottom: 5rem;
+  }
+
   .vue-notification-wrapper {
     width: 100%;
     overflow: hidden;