FIXED text not on top issue and modal not opening and some more

Author: Rupesh-Rathore

src/assets/icons/close.svg

@@ -13,16 +13,17 @@
   position: relative;
 }
 
-.slot {
-  height: 100%;
-  border-radius: 4px;
-  z-index: 10;
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: center;
+.slot , .context{
+    border-radius: inherit;
+    position: absolute;
+    z-index: 10;
+    width:  100%;
+    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .slot > div {
@@ -78,7 +79,6 @@
   animation-delay: 0s;
 }
 
-/* copy code from here */
 .bubble_square li:nth-child(2) {
   left: 10%;
   width: 20px;
@@ -183,8 +183,6 @@
   animation-duration: 11s;
 }
 
-/* copy code till here */
-
 @keyframes animate {
   0% {
     transform: translateY(0) rotate(0deg);

src/assets/styles/bubble.css

@@ -85,7 +85,7 @@ import "@/assets/styles/poem-dialog.css";
     await ensureVoicesLoaded();
 
     if (availableVoices.length === 0) {
-      audioToggle.textContent = "🚫";
+      audioToggle.innerHTML = `<svg id="audio-icon"viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 9.3345 19.8412 6.93964 18 5.29168M5.63605 5.63605L18.364 18.364" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>`;
       return;
     }
 
@@ -98,7 +98,7 @@ import "@/assets/styles/poem-dialog.css";
       availableVoices[0];
 
     if (!selectedVoice) {
-      audioToggle.textContent = "🚫";
+      audioToggle.innerHTML = `<svg id="audio-icon"viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 9.3345 19.8412 6.93964 18 5.29168M5.63605 5.63605L18.364 18.364" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>`;
       return;
     }
 
@@ -116,6 +116,7 @@ import "@/assets/styles/poem-dialog.css";
     currentText = lines.join(" ");
     currentLang = "en-US";
     await ensureVoicesLoaded();
+    modal.showModal();
   };
 
   audioToggle.onclick = () => {
@@ -133,12 +134,5 @@ import "@/assets/styles/poem-dialog.css";
     resetSpeakerButton();
   };
 
-  window.addEventListener("click", (e) => {
-    if (e.target === modal) {
-      modal.close();
-      resetSpeakerButton();
-    }
-  });
-
   ensureVoicesLoaded();
 </script>

src/components/PoemDialog.astro

@@ -4,7 +4,9 @@ import "@/assets/styles/bubble.css";
 
 <div class="bubble__container">
   <div class="bubble__board">
-    <div class="slot"><slot name="bobble-context" /></div>
+    <div class="slot">
+      <slot name="bobble-context" />
+    </div>
     <div class="bubble__area">
       <ul class="bubble_square">
         {Array.from({ length: 10 }, (_, i) => <li data-id={i + 1} />)}