chore: Link survey mobile view (#2493)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

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

@@ -333,7 +333,7 @@ export const Survey = ({
       <AutoCloseWrapper survey={survey} onClose={onClose}>
         <div
           className={cn(
-            "no-scrollbar rounded-custom bg-survey-bg flex h-full w-full flex-col justify-between px-6 pb-3 pt-6",
+            "no-scrollbar md:rounded-custom bg-survey-bg rounded-t-custom flex h-full w-full flex-col justify-between  rounded-b-none px-6 py-6 md:pb-3 md:pt-6",
             isCardBorderVisible ? "border-survey-border border" : "",
             survey.type === "link" ? "fb-survey-shadow" : ""
           )}>

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/ClientLogo/index.tsx

@@ -16,7 +16,7 @@ interface ClientLogoProps {
 export const ClientLogo = ({ environmentId, product, previewSurvey = false }: ClientLogoProps) => {
   return (
     <div
-      className={cn(previewSurvey ? "" : "left-5 top-5 md:left-7 md:top-7", "group absolute z-0 rounded-lg")}
+      className={cn(previewSurvey ? "" : "left-5 top-5 md:left-7 md:top-7", "group fixed z-0 rounded-lg")}
       style={{ backgroundColor: product.logo?.bgColor }}>
       {previewSurvey && environmentId && (
         <Link

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" />;
 };