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() {
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,8 +40,8 @@ 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>
`;