From abf376940d5ba33cd6326d506462947dec3779ba Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 11 Jul 2024 08:26:46 +0530
Subject: [PATCH] fix: Avoid overflow caused by the empty span element (#9753)

This PR addresses an issue with the `createNotificationBubble` function, which generates an empty `span` element with the class `woot--notification`. This `span` element is currently not utilized anywhere in the code and lacks associated CSS, leading to an overflow issue, specifically in the Firefox browser. It solves the website overflow issue by removing this unused `span` element. This change is unrelated to the unread notification dot, which is working as before.

Fixes https://linear.app/chatwoot/issue/PR-1098/missing-css-for-woot-notification-div
---
 app/javascript/sdk/IFrameHelper.js  | 2 --
 app/javascript/sdk/bubbleHelpers.js | 5 -----
 2 files changed, 7 deletions(-)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 275d082f5..8f6716f1c 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -14,7 +14,6 @@ import {
   chatBubble,
   closeBubble,
   bubbleHolder,
-  createNotificationBubble,
   onClickChatBubble,
   onBubbleClick,
   setBubbleText,
@@ -315,7 +314,6 @@ export const IFrameHelper = {
 
     bubbleHolder.appendChild(chatIcon);
     bubbleHolder.appendChild(closeBubble);
-    bubbleHolder.appendChild(createNotificationBubble());
     onClickChatBubble();
   },
   toggleCloseButton: () => {
diff --git a/app/javascript/sdk/bubbleHelpers.js b/app/javascript/sdk/bubbleHelpers.js
index 600c1444a..609fe04da 100644
--- a/app/javascript/sdk/bubbleHelpers.js
+++ b/app/javascript/sdk/bubbleHelpers.js
@@ -65,11 +65,6 @@ export const createBubbleHolder = hideMessageBubble => {
   body.appendChild(bubbleHolder);
 };
 
-export const createNotificationBubble = () => {
-  addClasses(notificationBubble, 'woot--notification');
-  return notificationBubble;
-};
-
 export const onBubbleClick = (props = {}) => {
   const { toggleValue } = props;
   const { isOpen } = window.$chatwoot;