fix: intercom bubble colliding with notifications (#3810)

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;