From c450c35baf87d9d1c1553bc81bee6a92602602f4 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Tue, 12 Nov 2024 07:46:51 +0530
Subject: [PATCH] fix: increase card size for link surveys (#4285)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
---
 apps/web/app/s/[surveyId]/components/LinkSurveyWrapper.tsx | 6 +++---
 packages/surveys/src/components/general/Survey.tsx         | 4 ++--
 packages/ui/components/PreviewSurvey/index.tsx             | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/s/[surveyId]/components/LinkSurveyWrapper.tsx b/apps/web/app/s/[surveyId]/components/LinkSurveyWrapper.tsx
index db5d4eeb4b..0058c8dc11 100644
--- a/apps/web/app/s/[surveyId]/components/LinkSurveyWrapper.tsx
+++ b/apps/web/app/s/[surveyId]/components/LinkSurveyWrapper.tsx
@@ -1,6 +1,6 @@
 import { LegalFooter } from "@/app/s/[surveyId]/components/LegalFooter";
 import { SurveyLoadingAnimation } from "@/app/s/[surveyId]/components/SurveyLoadingAnimation";
-import React, { useState } from "react";
+import { useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { TProduct, TProductStyling } from "@formbricks/types/product";
 import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
@@ -61,9 +61,9 @@ export const LinkSurveyWrapper = ({
       <div>
         <SurveyLoadingAnimation survey={survey} isBackgroundLoaded={isBackgroundLoaded} />
         <MediaBackground survey={survey} product={product} onBackgroundLoaded={handleBackgroundLoaded}>
-          <div className="flex max-h-dvh min-h-dvh items-end justify-center overflow-clip md:items-center">
+          <div className="flex max-h-dvh min-h-dvh items-end justify-center overflow-clip sm:items-center">
             {!styling.isLogoHidden && product.logo?.url && <ClientLogo product={product} />}
-            <div className="h-full w-full space-y-6 p-0 md:max-w-md">
+            <div className="h-full w-full space-y-6 p-0 sm:max-w-lg">
               {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
index 7b473fc220..2cb4cf4c5d 100644
--- a/packages/surveys/src/components/general/Survey.tsx
+++ b/packages/surveys/src/components/general/Survey.tsx
@@ -409,7 +409,7 @@ export const Survey = ({
       <AutoCloseWrapper survey={localSurvey} onClose={onClose} offset={offset}>
         <div
           className={cn(
-            "fb-no-scrollbar md:fb-rounded-custom fb-rounded-t-custom fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",
+            "fb-no-scrollbar sm:fb-rounded-custom fb-rounded-t-custom fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",
             cardArrangement === "simple" ? "fb-survey-shadow" : "",
             offset === 0 || cardArrangement === "simple" ? "fb-opacity-100" : "fb-opacity-0"
           )}>
@@ -430,7 +430,7 @@ export const Survey = ({
             )}>
             {content()}
           </div>
-          <div className="fb-mx-6 fb-mb-10 fb-mt-2 fb-space-y-3 md:fb-mb-6 md:fb-mt-6">
+          <div className="fb-mx-6 fb-mb-10 fb-mt-2 fb-space-y-3 sm:fb-mb-6 sm:fb-mt-6">
             {isBrandingEnabled && <FormbricksBranding />}
             {showProgressBar && <ProgressBar survey={localSurvey} questionId={questionId} />}
           </div>
diff --git a/packages/ui/components/PreviewSurvey/index.tsx b/packages/ui/components/PreviewSurvey/index.tsx
index 62f873c3c6..effc2039ee 100644
--- a/packages/ui/components/PreviewSurvey/index.tsx
+++ b/packages/ui/components/PreviewSurvey/index.tsx
@@ -385,7 +385,7 @@ export const PreviewSurvey = ({
                     <ClientLogo environmentId={environment.id} product={product} previewSurvey />
                   )}
                 </div>
-                <div className="z-0 w-full max-w-md rounded-lg border-transparent">
+                <div className="z-0 w-full max-w-lg rounded-lg border-transparent">
                   <SurveyInline
                     survey={{ ...survey, type: "link" }}
                     isBrandingEnabled={product.linkSurveyBranding}