fix: survey display and card width (#4937)

apps/web/modules/survey/link/components/legal-footer.tsx

@@ -21,7 +21,7 @@ export const LegalFooter = ({
 
   return (
     <div className="absolute bottom-0 z-[1500] h-10 w-full" role="contentinfo">
-      <div className="mx-auto flex h-full max-w-lg items-center justify-center p-2 text-center text-xs text-slate-500">
+      <div className="mx-auto flex h-full max-w-2xl items-center justify-center p-2 text-center text-xs text-slate-500">
         {IMPRINT_URL && (
           <Link href={IMPRINT_URL} target="_blank" className="hover:underline" tabIndex={-1}>
             {t("common.imprint")}

apps/web/modules/survey/link/components/link-survey-wrapper.tsx

@@ -80,7 +80,7 @@ export const LinkSurveyWrapper = ({
           onBackgroundLoaded={handleBackgroundLoaded}>
           <div className="flex max-h-dvh min-h-dvh items-center justify-center overflow-clip">
             {!styling.isLogoHidden && project.logo?.url && <ClientLogo projectLogo={project.logo} />}
-            <div className="h-full w-full max-w-lg space-y-6 px-1.5">
+            <div className="h-full w-full max-w-4xl space-y-6 px-1.5">
               {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 />

apps/web/modules/ui/components/media-background/index.tsx

@@ -166,7 +166,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
     return (
       <div
         ref={ContentRef}
-        className={`relative h-[90%] max-h-[40rem] w-[22rem] overflow-hidden rounded-[3rem] border-[6px] border-slate-400 ${getFilterStyle()}`}>
+        className={`relative h-[90%] max-h-[42rem] w-[22rem] overflow-hidden rounded-[3rem] border-[6px] border-slate-400 ${getFilterStyle()}`}>
         {/* below element is use to create notch for the mobile device mockup   */}
         <div className="absolute left-1/2 right-1/2 top-2 z-20 h-4 w-1/3 -translate-x-1/2 transform rounded-full bg-slate-400"></div>
         {surveyType === "link" && renderBackground()}

apps/web/modules/ui/components/preview-survey/index.tsx

@@ -392,7 +392,7 @@ export const PreviewSurvey = ({
                     <ClientLogo environmentId={environment.id} projectLogo={project.logo} previewSurvey />
                   )}
                 </div>
-                <div className="z-0 w-full max-w-lg rounded-lg border-transparent">
+                <div className="z-0 w-full max-w-4xl rounded-lg border-transparent">
                   <SurveyInline
                     survey={{ ...survey, type: "link" }}
                     isBrandingEnabled={project.linkSurveyBranding}