fix: formbricks-js not displaying properly on smaller screens (#866)

packages/js/src/lib/eventListeners.ts

@@ -14,8 +14,8 @@ import { addSyncEventListener, removeSyncEventListener } from "./sync";
 
 let areRemoveEventListenersAdded = false;
 
-export const addEventListeners = (): void => {
-  addSyncEventListener();
+export const addEventListeners = (debug: boolean = false): void => {
+  addSyncEventListener(debug);
   addPageUrlEventListeners();
   addClickEventListener();
   addExitIntentListener();

packages/js/src/lib/init.ts

@@ -97,7 +97,7 @@ export const initialize = async (
   }
 
   logger.debug("Adding event listeners");
-  addEventListeners();
+  addEventListeners(c.debug);
   addCleanupEventListeners();
 
   isInitialized = true;

packages/surveys/src/components/Modal.tsx

@@ -3,12 +3,6 @@ import { VNode } from "preact";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { cn } from "../lib/utils";
 
-// CSS classes object
-const mobileClasses = {
-  show: "translate-y-full",
-  hide: "translate-y-0",
-};
-
 interface ModalProps {
   children: VNode;
   isOpen: boolean;
@@ -29,7 +23,6 @@ export default function Modal({
   onClose,
 }: ModalProps) {
   const [show, setShow] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
   const isCenter = placement === "center";
   const modalRef = useRef(null);
 
@@ -56,21 +49,6 @@ export default function Modal({
     };
   }, [show, clickOutside, onClose, isCenter]);
 
-  const handleMobileClasses = (isMobile: boolean, show: boolean) => {
-    return isMobile ? (show ? mobileClasses.show : mobileClasses.hide) : "";
-  };
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 640);
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   // This classes will be applied only when screen size is greater than sm, hence sm is common prefix for all
   const getPlacementStyle = (placement: PlacementType) => {
     switch (placement) {
@@ -114,8 +92,8 @@ export default function Modal({
           "relative h-full w-full",
           isCenter
             ? darkOverlay
-              ? "sm:bg-gray-700/80"
-              : "sm:bg-white/50"
+              ? "bg-gray-700/80"
+              : "bg-white/50"
             : "bg-none transition-all duration-500 ease-in-out"
         )}>
         <div
@@ -123,9 +101,7 @@ export default function Modal({
           className={cn(
             getPlacementStyle(placement),
             show ? "opacity-100" : "opacity-0",
-            "pointer-events-auto absolute h-fit w-full overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out sm:m-4 sm:max-w-sm",
-            isMobile ? "top-full" : "",
-            handleMobileClasses(isMobile, show)
+            "pointer-events-auto absolute bottom-0 h-fit w-full overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out sm:m-4 sm:max-w-sm"
           )}>
           {!isCenter && (
             <div class="absolute right-0 top-0 block pr-4 pt-4">