Fix (spot): tailwind behavior conflict with flex class (#2616)

* Scope CSS styles for notification elements.

* Remove unnecessary spaces in HTML tags
This commit is contained in:
thomasmison 2024-09-27 13:54:33 +02:00 committed by GitHub
parent bd7ecf18f4
commit b06d56cfa7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -13,10 +13,10 @@ export default defineUnlistedScript(() => {
function injectCSS() { function injectCSS() {
const cssText = ` const cssText = `
.flex{display:flex} .or-flex{display:flex}
.items-center {align-items:center} .or-items-center {align-items:center}
.gap-3 {gap: .25rem} .or-gap-3 {gap: .25rem}
.spinner { .or-spinner {
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 2px solid rgba(0, 0, 0, 0.1); 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 message = event.data.message || "Recording has started successfully.";
const notificationContent = ` const notificationContent = `
<div class="flex gap-3 items-center"> <div class="or-flex or-gap-3 or-items-center">
<div class="spinner"></div> <div class="or-spinner"></div>
<span>${message}</span> <span>${message}</span>
</div> </div>
`; `;
const notification = document.createElement("div"); const notification = document.createElement("div");