From ad9ddb61cf5d9de7f33db6464cf6518688e4d4a3 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 25 Apr 2024 12:14:05 +0200
Subject: [PATCH] fix: link blocking next buttons on mobile (#2530)

---
 .../s/[surveyId]/components/LegalFooter.tsx   |  4 +--
 .../s/[surveyId]/components/LinkSurvey.tsx    |  2 +-
 .../general/ResponseErrorComponent.tsx        |  2 +-
 .../surveys/src/components/general/Survey.tsx |  2 +-
 .../src/components/general/SurveyInline.tsx   |  2 +-
 .../src/components/general/ThankYouCard.tsx   |  2 +-
 .../src/components/general/WelcomeCard.tsx    | 30 +++++++++----------
 .../wrappers/ScrollableContainer.tsx          |  2 +-
 8 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/apps/web/app/s/[surveyId]/components/LegalFooter.tsx b/apps/web/app/s/[surveyId]/components/LegalFooter.tsx
index fe32f6d412..34f819a8b6 100644
--- a/apps/web/app/s/[surveyId]/components/LegalFooter.tsx
+++ b/apps/web/app/s/[surveyId]/components/LegalFooter.tsx
@@ -24,8 +24,8 @@ export default function LegalFooter({
   };
 
   return (
-    <div className="sticky top-[100vh] h-12 w-full">
-      <div className="mx-auto max-w-lg p-3 text-center text-xs text-slate-400">
+    <div className="absolute bottom-0 h-10 w-full">
+      <div className="mx-auto max-w-lg p-2 text-center text-xs text-slate-400 text-opacity-50">
         {IMPRINT_URL && (
           <Link href={IMPRINT_URL} target="_blank" className="hover:underline">
             Imprint
diff --git a/apps/web/app/s/[surveyId]/components/LinkSurvey.tsx b/apps/web/app/s/[surveyId]/components/LinkSurvey.tsx
index 40c381955e..fe378581db 100644
--- a/apps/web/app/s/[surveyId]/components/LinkSurvey.tsx
+++ b/apps/web/app/s/[surveyId]/components/LinkSurvey.tsx
@@ -185,7 +185,7 @@ export default function LinkSurvey({
   };
 
   return (
-    <div className="flex h-screen items-center justify-center" style={{ height: "90svh" }}>
+    <div className="flex h-screen items-end justify-center md:items-center">
       {!determineStyling().isLogoHidden && product.logo?.url && <ClientLogo product={product} />}
       <ContentWrapper className="w-full p-0 md:max-w-md">
         {isPreview && (
diff --git a/packages/surveys/src/components/general/ResponseErrorComponent.tsx b/packages/surveys/src/components/general/ResponseErrorComponent.tsx
index 7841d1262a..2194da86c5 100644
--- a/packages/surveys/src/components/general/ResponseErrorComponent.tsx
+++ b/packages/surveys/src/components/general/ResponseErrorComponent.tsx
@@ -12,7 +12,7 @@ type ResponseErrorComponentProps = {
 
 export const ResponseErrorComponent = ({ questions, responseData, onRetry }: ResponseErrorComponentProps) => {
   return (
-    <div className={"flex flex-col bg-white"}>
+    <div className={"flex flex-col bg-white p-4"}>
       <span className={"mb-1.5 text-base font-bold leading-6 text-slate-900"}>
         {"Your feedback is stuck :("}
       </span>
diff --git a/packages/surveys/src/components/general/Survey.tsx b/packages/surveys/src/components/general/Survey.tsx
index 8cf01cd243..33f50ee36d 100644
--- a/packages/surveys/src/components/general/Survey.tsx
+++ b/packages/surveys/src/components/general/Survey.tsx
@@ -344,7 +344,7 @@ export const Survey = ({
               getCardContent()
             )}
           </div>
-          <div className="mx-6 mb-6 mt-2 space-y-3 md:mt-6">
+          <div className="mx-6 mb-10 mt-2 space-y-3 md:mb-6 md:mt-6">
             {isBrandingEnabled && <FormbricksBranding />}
             {showProgressBar && <ProgressBar survey={survey} questionId={questionId} />}
           </div>
diff --git a/packages/surveys/src/components/general/SurveyInline.tsx b/packages/surveys/src/components/general/SurveyInline.tsx
index e843f2c84f..a4bf73a72b 100644
--- a/packages/surveys/src/components/general/SurveyInline.tsx
+++ b/packages/surveys/src/components/general/SurveyInline.tsx
@@ -20,7 +20,7 @@ export function SurveyInline(props: SurveyInlineProps) {
     <div id="fbjs" className="formbricks-form h-full w-full">
       {isMobile ? (
         <div className="flex h-screen w-full flex-col justify-end overflow-hidden">
-          <div className="overflow-auto pt-[10vh]">
+          <div className="overflow-auto pt-[11vh]">
             <Survey {...props} />
           </div>
         </div>
diff --git a/packages/surveys/src/components/general/ThankYouCard.tsx b/packages/surveys/src/components/general/ThankYouCard.tsx
index 4043dfd82f..6b0837cd0c 100644
--- a/packages/surveys/src/components/general/ThankYouCard.tsx
+++ b/packages/surveys/src/components/general/ThankYouCard.tsx
@@ -85,7 +85,7 @@ export const ThankYouCard = ({
                   window.location.replace(buttonLink);
                 }}
               />
-              <p class="text-subheading text-xs">Press Enter ↵</p>
+              <p class="text-subheading hidden text-xs md:flex">Press Enter ↵</p>
             </div>
           )}
         </div>
diff --git a/packages/surveys/src/components/general/WelcomeCard.tsx b/packages/surveys/src/components/general/WelcomeCard.tsx
index 47ac466584..eb089d6595 100644
--- a/packages/surveys/src/components/general/WelcomeCard.tsx
+++ b/packages/surveys/src/components/general/WelcomeCard.tsx
@@ -114,37 +114,35 @@ export const WelcomeCard = ({
         </div>
       </ScrollableContainer>
 
-      <div className="mx-6 mt-4 flex w-full justify-between">
-        <div className="flex w-full justify-start gap-4">
-          <SubmitButton
-            buttonLabel={getLocalizedValue(buttonLabel, languageCode)}
-            isLastQuestion={false}
-            focus={!isInIframe}
-            onClick={() => {
-              onSubmit({ ["welcomeCard"]: "clicked" }, {});
-            }}
-            type="button"
-          />
-          <div className="text-subheading flex items-center text-xs">Press Enter ↵</div>
-        </div>
+      <div className="mx-6 mt-4 flex  gap-4">
+        <SubmitButton
+          buttonLabel={getLocalizedValue(buttonLabel, languageCode)}
+          isLastQuestion={false}
+          focus={!isInIframe}
+          onClick={() => {
+            onSubmit({ ["welcomeCard"]: "clicked" }, {});
+          }}
+          type="button"
+        />
+        <div className="text-subheading hidden items-center text-xs md:flex">Press Enter ↵</div>
       </div>
 
       {timeToFinish && !showResponseCount ? (
-        <div className="item-center text-subheading mt-4 flex">
+        <div className="item-center text-subheading my-4 ml-6 flex">
           <TimerIcon />
           <p className="pt-1 text-xs">
             <span> Takes {calculateTimeToComplete()} </span>
           </p>
         </div>
       ) : showResponseCount && !timeToFinish && responseCount && responseCount > 3 ? (
-        <div className="item-center text-subheading mt-4 flex">
+        <div className="item-center text-subheading my-4 ml-6 flex">
           <UsersIcon />
           <p className="pt-1 text-xs">
             <span>{`${responseCount} people responded`}</span>
           </p>
         </div>
       ) : timeToFinish && showResponseCount ? (
-        <div className="item-center text-subheading mt-4 flex">
+        <div className="item-center text-subheading my-4 ml-6 flex">
           <TimerIcon />
           <p className="pt-1 text-xs">
             <span> Takes {calculateTimeToComplete()} </span>
diff --git a/packages/surveys/src/components/wrappers/ScrollableContainer.tsx b/packages/surveys/src/components/wrappers/ScrollableContainer.tsx
index 66b81eddd5..4a5d31471b 100644
--- a/packages/surveys/src/components/wrappers/ScrollableContainer.tsx
+++ b/packages/surveys/src/components/wrappers/ScrollableContainer.tsx
@@ -56,7 +56,7 @@ export const ScrollableContainer = ({ children }: ScrollableContainerProps) => {
         ref={containerRef}
         style={{
           scrollbarGutter: "stable",
-          maxHeight: isSurveyPreview ? "40vh" : "60vh",
+          maxHeight: isSurveyPreview ? "41vh" : "60vh",
         }}
         className={`overflow-${isOverflowHidden ? "hidden" : "auto"} pb-1 pl-6 pr-4`}
         onMouseEnter={() => toggleOverflow(false)}