fix: link blocking next buttons on mobile (#2530)

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

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 && (

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>

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>

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>

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>

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>

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)}