Increase formbricks-js z-index to 999999 to increase compatibility with more websites (#639)

* Fix formbricks-js modal covered by other elements

* Fix wrong usage of prefix

* add changeset

.changeset/three-masks-retire.md

@@ -0,0 +1,5 @@
+---
+"@formbricks/js": patch
+---
+
+Increase z-index to 999999 to increase compatibility with more websites

packages/js/src/components/FormbricksSignature.tsx

@@ -9,7 +9,7 @@ export default function FormbricksSignature() {
       <p className="fb-text-xs fb-text-slate-400">
         Powered by{" "}
         <b>
-          <span className="fb-text-slate-500 fb-hover:text-slate-700">Formbricks</span>
+          <span className="fb-text-slate-500 hover:fb-text-slate-700">Formbricks</span>
         </b>
       </p>
     </a>

packages/js/src/components/Headline.tsx

@@ -12,7 +12,7 @@ export default function Headline({
   return (
     <label
       htmlFor={questionId}
-      className="fb-mb-1.5 fb-block fb-text-base fb-font-semibold fb-leading-6 fb-mr-8 text-slate-900"
+      className="fb-mb-1.5 fb-block fb-text-base fb-font-semibold fb-leading-6 fb-mr-8 fb-text-slate-900"
       style={style}>
       {headline}
     </label>

packages/js/src/components/HtmlBody.tsx

@@ -5,7 +5,7 @@ export default function HtmlBody({ htmlString, questionId }: { htmlString?: stri
   return (
     <label
       htmlFor={questionId}
-      className="fb-block fb-text-sm fb-font-normal fb-leading-6 text-slate-600"
+      className="fb-block fb-text-sm fb-font-normal fb-leading-6 fb-text-slate-600"
       dangerouslySetInnerHTML={{ __html: cleanHtml(htmlString) }}></label>
   );
 }

packages/js/src/components/Modal.tsx

@@ -62,7 +62,7 @@ export default function Modal({
       aria-live="assertive"
       className={cn(
         isCenter ? "fb-pointer-events-auto" : "fb-pointer-events-none",
-        "fb-fixed fb-inset-0 fb-flex fb-items-end fb-z-40 fb-p-3 sm:fb-p-0"
+        "fb-fixed fb-inset-0 fb-flex fb-items-end fb-z-999999 fb-p-3 sm:fb-p-0"
       )}>
       <div
         className={cn(
@@ -84,7 +84,7 @@ export default function Modal({
             <button
               type="button"
               onClick={close}
-              class="fb-rounded-md fb-bg-white fb-relative fb-z-50 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-text-slate-400 hover:fb-text-slate-500 focus:ring-slate-500">
+              class="fb-rounded-md fb-bg-white fb-relative focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-text-slate-400 hover:fb-text-slate-500 focus:ring-slate-500">
               <span class="fb-sr-only">Close</span>
               <svg
                 class="fb-h-6 fb-w-6"

packages/js/src/components/Subheader.tsx

@@ -2,7 +2,7 @@ import { h } from "preact";
 
 export default function Subheader({ subheader, questionId }: { subheader?: string; questionId: string }) {
   return (
-    <label htmlFor={questionId} className="fb-block fb-text-sm fb-font-normal fb-leading-6 text-slate-600">
+    <label htmlFor={questionId} className="fb-block fb-text-sm fb-font-normal fb-leading-6 fb-text-slate-600">
       {subheader}
     </label>
   );

packages/js/tailwind.config.js

@@ -7,7 +7,11 @@ module.exports = {
   },
   content: ["./src/**/*.{tsx,ts,jsx,js}"],
   theme: {
-    extend: {},
+    extend: {
+      zIndex: {
+        '999999': '999999',
+      }
+    },
   },
   prefix: "fb-",
   plugins: [],