fix: fixed box overflow and width

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx

@@ -5,11 +5,12 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
         className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
         style={{
           backgroundColor: survey.surveyBackground.bg || "#ffff",
-          filter: survey.surveyBackground.brightness
+          filter: survey.surveyBackground?.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
-        }}></div>
-      <div className="absolute flex h-full w-full items-center justify-center">{children}</div>
+        }}>
+        <div className="flex h-full w-full items-center justify-center">{children}</div>
+      </div>
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
     <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
@@ -24,7 +25,7 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
           autoPlay
           className="absolute inset-0 h-full w-full object-cover"
           style={{
-            filter: survey.surveyBackground.brightness
+            filter: survey.surveyBackground?.brightness
               ? `brightness(${survey.surveyBackground.brightness}%)`
               : "none",
           }}>
@@ -40,18 +41,24 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
         className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
         style={{
           backgroundImage: `url(${survey.surveyBackground.bg})`,
-          filter: survey.surveyBackground.brightness
+          filter: survey.surveyBackground?.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
-        }}></div>
-      <div className="absolute flex h-full w-full items-center justify-center">{children}</div>
+        }}>
+        <div className="flex h-full w-full items-center justify-center">{children}</div>
+      </div>
     </div>
   ) : (
     <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
       <div
         className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{ backgroundColor: "#ffff" }}>
-        {children}
+        style={{
+          backgroundColor: "#ffff",
+          filter: survey.surveyBackground?.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}>
+        <div className="flex h-full w-full items-center justify-center">{children}</div>
       </div>
     </div>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx

@@ -6,7 +6,7 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
         ref={ContentRef}
         style={{
           backgroundColor: survey.surveyBackground.bg,
-          filter: survey.surveyBackground.brightness
+          filter: survey.surveyBackground?.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
         }}></div>
@@ -29,7 +29,7 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
               style={{
                 width: "100%",
                 height: "100%",
-                filter: survey.surveyBackground.brightness
+                filter: survey.surveyBackground?.brightness
                   ? `brightness(${survey.surveyBackground.brightness}%)`
                   : "none",
               }}>
@@ -48,7 +48,7 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
         ref={ContentRef}
         style={{
           backgroundImage: `url(${survey.surveyBackground.bg})`,
-          filter: survey.surveyBackground.brightness
+          filter: survey.surveyBackground?.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
         }}></div>
@@ -63,7 +63,7 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
         ref={ContentRef}
         style={{
           backgroundColor: "#ffff",
-          filter: survey.surveyBackground.brightness
+          filter: survey.surveyBackground?.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
         }}></div>

apps/web/app/s/[surveyId]/components/LegalFooter.tsx

@@ -1,10 +1,19 @@
 import { IMPRINT_URL, PRIVACY_URL } from "@formbricks/lib/constants";
 import Link from "next/link";
 
-export default function LegalFooter() {
+interface LegalFooterProps {
+  bgColor?: string | null;
+}
+
+export default function LegalFooter({ bgColor }: LegalFooterProps) {
   if (!IMPRINT_URL && !PRIVACY_URL) return null;
+
   return (
-    <div className="h-10 w-full border-t border-slate-200">
+    <div
+      className={`h-12 w-full border-t border-slate-400`}
+      style={{
+        backgroundColor: `${bgColor}`,
+      }}>
       <div className="mx-auto max-w-lg p-3 text-center text-sm text-slate-400">
         {IMPRINT_URL && (
           <Link href={IMPRINT_URL} target="_blank">

apps/web/app/s/[surveyId]/components/SurveyBg.tsx

@@ -1,57 +1,69 @@
-export default async function SurveyBg({ children, survey }) {
+import LegalFooter from "@/app/s/[surveyId]/components/LegalFooter";
+import { TSurvey } from "@formbricks/types/surveys";
+
+export default async function SurveyBg({ children, survey }: { children: React.ReactNode; survey: TSurvey }) {
   return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
-    <div className={`flex h-full items-center justify-center `}>
+    <div>
       <div
-        className={`flex h-full w-full`}
+        className={`flex  min-h-screen flex-col items-center justify-center px-2`}
         style={{
           backgroundColor: `${survey.surveyBackground?.bg}`,
           filter: survey.surveyBackground.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
-        }}></div>
-      <div className="absolute h-[60%]">{children}</div>
+        }}>
+        <div className="relative w-full">{children}</div>
+      </div>
+      <LegalFooter bgColor={survey.surveyBackground?.bg || "#ffff"} />
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
-    <div className={`flex h-full items-center justify-center `}>
-      <video
-        muted
-        loop
-        autoPlay
-        className="fixed left-0 top-0 -z-50 h-full w-full object-cover"
-        style={{
-          filter: survey.surveyBackground.brightness
-            ? `brightness(${survey.surveyBackground.brightness}%)`
-            : "none",
-        }}>
-        <source src={survey.surveyBackground?.bg} type="video/mp4" />
-        Your browser does not support the video tag.
-      </video>
-      <div className="h-[60%]">{children}</div>
+    <div>
+      <div className={`flex  min-h-screen flex-col items-center justify-center px-2`}>
+        <video
+          muted
+          loop
+          autoPlay
+          className="fixed left-0 top-0 -z-50 h-full w-full  object-cover"
+          style={{
+            filter: survey.surveyBackground?.brightness
+              ? `brightness(${survey.surveyBackground.brightness}%)`
+              : "none",
+          }}>
+          <source src={survey.surveyBackground?.bg || ""} type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+        <div className="relative w-full">{children}</div>
+      </div>
+      <LegalFooter bgColor={survey.surveyBackground?.bg || "#ffff"} />
     </div>
   ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
-    <div className={`flex h-full items-center justify-center `}>
+    <div>
       <div
-        className={`flex h-full w-full`}
+        className={`flex  min-h-screen flex-col items-center justify-center px-2`}
         style={{
           backgroundImage: `url(${survey.surveyBackground?.bg})`,
           backgroundSize: "inherit",
-          filter: survey.surveyBackground.brightness
+          filter: survey.surveyBackground?.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
-        }}></div>
-      <div className="absolute h-[60%]">{children}</div>
+        }}>
+        <div className="relative w-full">{children}</div>
+      </div>
+      <LegalFooter bgColor={survey.surveyBackground?.bg || "#ffff"} />
     </div>
   ) : (
-    <div className={`flex h-full items-center justify-center `}>
+    <div>
       <div
-        className={`flex h-full w-full`}
+        className={`flex  min-h-screen flex-col items-center justify-center px-2`}
         style={{
-          backgroundColor: "#ffff",
-          filter: survey.surveyBackground.brightness
+          backgroundColor: `#ffff`,
+          filter: survey.surveyBackground?.brightness
             ? `brightness(${survey.surveyBackground.brightness}%)`
             : "none",
-        }}></div>
-      <div className="absolute h-[60%]">{children}</div>
+        }}>
+        <div className="relative w-full">{children}</div>
+      </div>
+      <LegalFooter bgColor={"#ffff"} />
     </div>
   );
 }

apps/web/app/s/[surveyId]/layout.tsx

@@ -1,11 +1,3 @@
-import LegalFooter from "@/app/s/[surveyId]/components/LegalFooter";
-import SurveyBg from "@/app/s/[surveyId]/components/SurveyBg";
-
 export default async function SurveyLayout({ children }) {
-  return (
-    <div>
-      <div className="h-screen">{children}</div>
-      <LegalFooter />
-    </div>
-  );
+  return <div>{children}</div>;
 }