From b06d56cfa79bd2a5ad16c7a39ca0e4dd001b4422 Mon Sep 17 00:00:00 2001
From: thomasmison <45166393+thomasmison@users.noreply.github.com>
Date: Fri, 27 Sep 2024 13:54:33 +0200
Subject: [PATCH] Fix (spot): tailwind behavior conflict with flex class
 (#2616)

* Scope CSS styles for notification elements.

* Remove unnecessary spaces in HTML tags
---
 spot/entrypoints/notifications.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/spot/entrypoints/notifications.js b/spot/entrypoints/notifications.js
index da4a3d51e..412668efb 100644
--- a/spot/entrypoints/notifications.js
+++ b/spot/entrypoints/notifications.js
@@ -13,10 +13,10 @@ export default defineUnlistedScript(() => {
 
   function injectCSS() {
     const cssText = `
-    .flex{display:flex}
-    .items-center {align-items:center}
-    .gap-3 {gap: .25rem}
-    .spinner {
+    .or-flex{display:flex}
+    .or-items-center {align-items:center}
+    .or-gap-3 {gap: .25rem}
+    .or-spinner {
         width: 18px;
         height: 18px;
         border: 2px solid rgba(0, 0, 0, 0.1);
@@ -40,10 +40,10 @@ export default defineUnlistedScript(() => {
     const message = event.data.message || "Recording has started successfully.";
 
     const notificationContent = `
-    <div class="flex gap-3 items-center">
-      <div class="spinner"></div>
+    <div class="or-flex or-gap-3 or-items-center">
+      <div class="or-spinner"></div>
       <span>${message}</span>
-      </div>
+     </div>
     `;
 
     const notification = document.createElement("div");