diff --git a/index.html b/index.html
index 783aa1f..ef62349 100644
--- a/index.html
+++ b/index.html
@@ -51,9 +51,9 @@
             </div>
         </div>
 
-        <div class="absolute inset-0 z-10 hidden min-h-screen bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>
+        <div class="fixed inset-0 z-10 hidden min-h-screen bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>
 
-        <div class="absolute md:top-[25%] max-w-[90%] md:max-w-[768px] text-white z-20 hidden flex-col gap-4 p-4 rounded-lg shadow-lg bg-stone-900" id="preview_sticker_pack_add_to_element">
+        <div class="fixed top-8 md:top-32 max-w-[90%] md:max-w-[768px] text-white z-20 hidden flex-col gap-4 p-4 rounded-lg shadow-lg bg-stone-900" id="preview_sticker_pack_add_to_element">
             <p>
             Type /devtools in chat. Other -> Explore account data in Element Web (not "room account data", must be the global one), edit the m.widgets account data event to have the following content:
             </p>
diff --git a/static/tailwind.css b/static/tailwind.css
index 83ab456..ab6e15c 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -600,6 +600,18 @@ video {
   inset: 0px;
 }
 
+.top-0 {
+  top: 0px;
+}
+
+.top-16 {
+  top: 4rem;
+}
+
+.top-8 {
+  top: 2rem;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -922,6 +934,14 @@ video {
     top: 25%;
   }
 
+  .md\:top-64 {
+    top: 16rem;
+  }
+
+  .md\:top-32 {
+    top: 8rem;
+  }
+
   .md\:w-\[600px\] {
     width: 600px;
   }