chore: Link survey mobile view (#2493)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
formbricks · Apr 24, 2024 · dcc98b6 · dcc98b6
1 parent 4f5acbc
commit dcc98b6
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 8 deletions.
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx b/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}

diff --git a/apps/web/app/s/[surveyId]/components/LinkSurvey.tsx b/apps/web/app/s/[surveyId]/components/LinkSurvey.tsx
@@ -117,6 +117,10 @@ export default function LinkSurvey({
     if (window.self === window.top) {
       setAutofocus(true);
     }
+    // For safari on mobile devices, scroll is a bit off due to dynamic height of address bar, so on inital load, we scroll to the bottom
+    window.scrollTo({
+      top: document.body.scrollHeight,
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -181,9 +185,9 @@ export default function LinkSurvey({
   };
 
   return (
-    <div className="flex h-screen items-center justify-center">
+    <div className="flex h-screen items-center justify-center" style={{ height: "90svh" }}>
       {!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 />

diff --git a/packages/surveys/src/components/general/Survey.tsx b/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" : ""
           )}>

diff --git a/packages/surveys/src/components/general/SurveyInline.tsx b/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>
   );
 }
diff --git a/packages/ui/ClientLogo/index.tsx b/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

diff --git a/packages/ui/Survey/index.tsx b/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" />;
 };