chore: Link survey mobile view

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx

@@ -260,13 +260,13 @@ export const PreviewSurvey = ({
                   />
                 </Modal>
               ) : (
-                <div className="w-full px-3">
+                <div className="h-full w-full">
                   <div className="absolute left-5 top-5">
                     {!styling.isLogoHidden && product.logo?.url && (
                       <ClientLogo environmentId={environment.id} product={product} previewSurvey />
                     )}
                   </div>
-                  <div className="no-scrollbar z-10 w-full max-w-md overflow-y-auto rounded-lg border border-transparent">
+                  <div className="flex h-full items-end">
                     <SurveyInline
                       survey={survey}
                       isBrandingEnabled={product.linkSurveyBranding}

apps/web/app/s/[surveyId]/components/LinkSurvey.tsx

@@ -180,7 +180,7 @@ export default function LinkSurvey({
   return (
     <div className="flex h-screen items-center justify-center">
       {!determineStyling().isLogoHidden && product.logo?.url && <ClientLogo product={product} />}
-      <ContentWrapper className="w-11/12 p-0 md:max-w-md">
+      <ContentWrapper className="w-full p-0 md:max-w-md">
         {isPreview && (
           <div className="fixed left-0 top-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-sm">
             <div />

packages/surveys/src/components/general/SurveyInline.tsx

@@ -1,11 +1,32 @@
+import { useEffect, useState } from "preact/hooks";
+
 import { SurveyInlineProps } from "@formbricks/types/formbricksSurveys";
 
 import { Survey } from "./Survey";
 
 export function SurveyInline(props: SurveyInlineProps) {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768); // Assuming 768px as a breakpoint for mobile
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <div id="fbjs" className="formbricks-form h-full w-full">
-      <Survey {...props} />
+      {isMobile ? (
+        <div className="flex h-screen w-full flex-col justify-end overflow-hidden">
+          <div className="max-h-[90vh] overflow-auto">
+            <Survey {...props} />
+          </div>
+        </div>
+      ) : (
+        <Survey {...props} />
+      )}
     </div>
   );
 }

packages/ui/Survey/index.tsx

@@ -40,5 +40,5 @@ export const SurveyInline = (props: Omit<SurveyInlineProps, "containerId">) => {
     loadScript();
   }, [containerId, props, renderInline]);
 
-  return <div id={containerId} className="h-full w-full" />;
+  return <div id={containerId} className="w-full" />;
 };