remove SurveyBg and PreviewSurveyDesktop

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

@@ -1,10 +1,9 @@
 "use client";
 
 import Modal from "@/app/(app)/environments/[environmentId]/surveys/components/Modal";
-import TabOption from "@/app/(app)/environments/[environmentId]/surveys/components/TabOption";
-
-import PreviewSurveyBgDeskstop from "@/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop";
 import PreviewSurveyBgMobile from "@/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile";
+import TabOption from "@/app/(app)/environments/[environmentId]/surveys/components/TabOption";
+import MediaBackground from "@/app/s/[surveyId]/components/MediaBackground";
 import type { TEnvironment } from "@formbricks/types/environment";
 import type { TProduct } from "@formbricks/types/product";
 import { TSurvey } from "@formbricks/types/surveys";
@@ -290,7 +289,7 @@ export default function PreviewSurvey({
                 />
               </Modal>
             ) : (
-              <PreviewSurveyBgDeskstop survey={survey} ContentRef={ContentRef}>
+              <MediaBackground survey={survey} ContentRef={ContentRef} isEditorView>
                 <div className="z-0 w-full  max-w-md rounded-lg p-4">
                   <SurveyInline
                     survey={survey}
@@ -301,7 +300,7 @@ export default function PreviewSurvey({
                     isRedirectDisabled={true}
                   />
                 </div>
-              </PreviewSurveyBgDeskstop>
+              </MediaBackground>
             )}
           </div>
         )}

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

@@ -1,11 +0,0 @@
-import BackgroundView from "@/app/s/[surveyId]/components/BackgroundView";
-
-export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }) {
-  return (
-    <>
-      <BackgroundView survey={survey} isPreview={true} ContentRef={ContentRef}>
-        {children}
-      </BackgroundView>
-    </>
-  );
-}

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

@@ -1,183 +0,0 @@
-"use client";
-
-import { TSurvey } from "@formbricks/types/surveys";
-
-import React from "react";
-
-const BackgroundView = ({
-  children,
-  survey,
-  isPreview,
-  ContentRef,
-  LegalFooter,
-}: {
-  children: React.ReactNode;
-  survey: TSurvey;
-  isPreview: boolean;
-  ContentRef?: React.RefObject<HTMLDivElement>;
-  LegalFooter?: React.ComponentType<{
-    bgColor?: string | null;
-  }>;
-}) => {
-  if (isPreview) {
-    if (survey.surveyBackground && survey.surveyBackground.bgType === "color") {
-      return (
-        <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">
-            <div
-              className="absolute inset-0 h-full w-full object-contain"
-              style={{
-                backgroundColor: survey.surveyBackground.bg as string,
-                filter: survey.surveyBackground.brightness
-                  ? `brightness(${survey.surveyBackground.brightness}%)`
-                  : "none",
-              }}></div>
-            <div className="flex h-full w-full items-center justify-center">{children}</div>
-          </div>
-        </div>
-      );
-    }
-
-    if (survey.surveyBackground && survey.surveyBackground.bgType === "animation") {
-      return (
-        <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={{
-              background: `url(${survey.surveyBackground.bg}) no-repeat center center fixed`,
-            }}>
-            <video
-              muted
-              loop
-              autoPlay
-              className="absolute inset-0 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="flex h-full w-full items-center justify-center">{children}</div>
-          </div>
-        </div>
-      );
-    }
-
-    if (survey.surveyBackground && survey.surveyBackground.bgType === "image") {
-      return (
-        <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">
-            <div
-              className="absolute inset-0 h-full w-full object-contain"
-              style={{
-                backgroundImage: `url(${survey.surveyBackground.bg})`,
-                backgroundSize: "contain",
-                backgroundRepeat: "no-repeat",
-                filter: survey.surveyBackground.brightness
-                  ? `brightness(${survey.surveyBackground.brightness}%)`
-                  : "none",
-              }}></div>
-            <div className="flex h-full w-full items-center justify-center">{children}</div>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <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">
-          <div
-            className="absolute inset-0 h-full w-full object-cover"
-            style={{
-              backgroundColor: "#ffff",
-              filter: survey.surveyBackground?.brightness
-                ? `brightness(${survey.surveyBackground.brightness}%)`
-                : "none",
-            }}></div>
-          <div className="flex h-full w-full items-center justify-center">{children}</div>
-        </div>
-      </div>
-    );
-  } else {
-    if (survey.surveyBackground && survey.surveyBackground.bgType === "color") {
-      return (
-        <>
-          <div
-            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 className="relative w-full">{children}</div>
-          </div>
-          {LegalFooter && <LegalFooter bgColor={survey.surveyBackground.bg || "#ffff"} />}
-        </>
-      );
-    }
-
-    if (survey.surveyBackground && survey.surveyBackground.bgType === "animation") {
-      return (
-        <>
-          <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 && <LegalFooter bgColor={survey.surveyBackground.bg || "#ffff"} />}
-        </>
-      );
-    }
-
-    if (survey.surveyBackground && survey.surveyBackground.bgType === "image") {
-      return (
-        <div>
-          <div
-            className={`flex min-h-screen flex-col items-center justify-center px-2`}
-            style={{
-              backgroundImage: `url(${survey.surveyBackground.bg})`,
-              backgroundSize: "cover",
-              filter: survey.surveyBackground.brightness
-                ? `brightness(${survey.surveyBackground.brightness}%)`
-                : "none",
-            }}>
-            <div className="relative w-full">{children}</div>
-          </div>
-          {LegalFooter && <LegalFooter bgColor={survey.surveyBackground.bg || "#ffff"} />}
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <div
-          className={`flex min-h-screen flex-col items-center justify-center px-2`}
-          style={{
-            backgroundColor: `#ffff`,
-            filter: survey.surveyBackground?.brightness
-              ? `brightness(${survey.surveyBackground.brightness}%)`
-              : "none",
-          }}>
-          <div className="relative w-full">{children}</div>
-        </div>
-        {LegalFooter && <LegalFooter bgColor={"#ffff"} />}
-      </div>
-    );
-  }
-};
-
-export default BackgroundView;

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

@@ -10,19 +10,19 @@ export default function LegalFooter({ bgColor }: LegalFooterProps) {
 
   return (
     <div
-      className={`h-12 w-full border-t border-slate-400`}
+      className={`fixed bottom-0 h-12 w-full`}
       style={{
         backgroundColor: `${bgColor}`,
       }}>
-      <div className="mx-auto max-w-lg p-3 text-center text-sm text-slate-400">
+      <div className="mx-auto max-w-lg p-3 text-center text-xs text-slate-400">
         {IMPRINT_URL && (
-          <Link href={IMPRINT_URL} target="_blank">
+          <Link href={IMPRINT_URL} target="_blank" className="hover:underline">
             Imprint
           </Link>
         )}
-        {IMPRINT_URL && PRIVACY_URL && <span> | </span>}
+        {IMPRINT_URL && PRIVACY_URL && <span className="px-2">|</span>}
         {PRIVACY_URL && (
-          <Link href={PRIVACY_URL} target="_blank">
+          <Link href={PRIVACY_URL} target="_blank" className="hover:underline">
             Privacy Policy
           </Link>
         )}

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

@@ -116,7 +116,7 @@ export default function LinkSurvey({
 
   return (
     <>
-      <ContentWrapper className="h-full w-full p-0 md:max-w-lg">
+      <ContentWrapper className="h-full w-full p-0 md:max-w-md">
         {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/app/s/[surveyId]/components/MediaBackground.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { TSurvey } from "@formbricks/types/surveys";
+import React from "react";
+
+const MediaBackground = ({
+  children,
+  survey,
+  isEditorView,
+  ContentRef,
+}: {
+  children: React.ReactNode;
+  survey: TSurvey;
+  isEditorView?: boolean;
+  ContentRef?: React.RefObject<HTMLDivElement>;
+}) => {
+  const getFilterStyle = () => {
+    return survey.surveyBackground?.brightness
+      ? { filter: `brightness(${survey.surveyBackground.brightness}%)` }
+      : {};
+  };
+
+  const renderBackground = () => {
+    const filterStyle = getFilterStyle();
+
+    switch (survey.surveyBackground?.bgType) {
+      case "color":
+        // Ensure backgroundColor is applied directly
+        return (
+          <div
+            style={{
+              ...filterStyle,
+              backgroundColor: survey.surveyBackground.bg || "#ffff", // Default color
+              width: "100%",
+              height: "100%",
+            }}
+            className="absolute inset-0"
+          />
+        );
+      case "animation":
+        return (
+          <video
+            muted
+            loop
+            autoPlay
+            style={filterStyle}
+            className="absolute inset-0 h-full w-full object-cover">
+            <source src={survey.surveyBackground.bg || ""} type="video/mp4" />
+          </video>
+        );
+      case "image":
+        return (
+          <div
+            style={{
+              ...filterStyle,
+              backgroundImage: `url(${survey.surveyBackground.bg})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+            }}
+            className="absolute inset-0 h-full w-full"
+          />
+        );
+      default:
+        return <div style={{ backgroundColor: "#ffff" }} className="absolute inset-0 h-full w-full" />;
+    }
+  };
+
+  const commonClasses = "relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6";
+  const previewClasses = "flex flex-grow flex-col overflow-y-auto rounded-b-lg";
+
+  return (
+    <>
+      {isEditorView ? (
+        <div className={previewClasses} ref={ContentRef}>
+          <div className={commonClasses}>
+            {renderBackground()}
+            <div className="flex h-full w-full items-center justify-center">{children}</div>
+          </div>
+        </div>
+      ) : (
+        <div className={`flex min-h-screen flex-col items-center justify-center px-2`}>
+          {renderBackground()}
+          <div className="relative w-full">{children}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default MediaBackground;

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

@@ -1,13 +0,0 @@
-import LegalFooter from "@/app/s/[surveyId]/components/LegalFooter";
-import BackgroundView from "@/app/s/[surveyId]/components/BackgroundView";
-import { TSurvey } from "@formbricks/types/surveys";
-
-export default async function SurveyBg({ children, survey }: { children: React.ReactNode; survey: TSurvey }) {
-  return (
-    <>
-      <BackgroundView isPreview={false} survey={survey} LegalFooter={LegalFooter}>
-        {children}
-      </BackgroundView>
-    </>
-  );
-}

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

@@ -1,9 +1,10 @@
 export const revalidate = REVALIDATION_INTERVAL;
 
 import { validateSurveySingleUseId } from "@/app/lib/singleUseSurveys";
+import LegalFooter from "@/app/s/[surveyId]/components/LegalFooter";
 import LinkSurvey from "@/app/s/[surveyId]/components/LinkSurvey";
+import MediaBackground from "@/app/s/[surveyId]/components/MediaBackground";
 import PinScreen from "@/app/s/[surveyId]/components/PinScreen";
-import SurveyBg from "@/app/s/[surveyId]/components/SurveyBg";
 import SurveyInactive from "@/app/s/[surveyId]/components/SurveyInactive";
 import { checkValidity } from "@/app/s/[surveyId]/lib/prefilling";
 import { REVALIDATION_INTERVAL, WEBAPP_URL } from "@formbricks/lib/constants";
@@ -174,17 +175,20 @@ export default async function LinkSurveyPage({ params, searchParams }: LinkSurve
   }
 
   return survey ? (
-    <SurveyBg survey={survey}>
-      <LinkSurvey
-        survey={survey}
-        product={product}
-        userId={userId}
-        emailVerificationStatus={emailVerificationStatus}
-        prefillAnswer={isPrefilledAnswerValid ? prefillAnswer : null}
-        singleUseId={isSingleUseSurvey ? singleUseId : undefined}
-        singleUseResponse={singleUseResponse ? singleUseResponse : undefined}
-        webAppUrl={WEBAPP_URL}
-      />
-    </SurveyBg>
+    <div>
+      <MediaBackground survey={survey}>
+        <LinkSurvey
+          survey={survey}
+          product={product}
+          userId={userId}
+          emailVerificationStatus={emailVerificationStatus}
+          prefillAnswer={isPrefilledAnswerValid ? prefillAnswer : null}
+          singleUseId={isSingleUseSurvey ? singleUseId : undefined}
+          singleUseResponse={singleUseResponse ? singleUseResponse : undefined}
+          webAppUrl={WEBAPP_URL}
+        />
+      </MediaBackground>
+      <LegalFooter bgColor={survey.surveyBackground?.bg || "#ffff"} />
+    </div>
   ) : null;
 }

packages/surveys/src/components/general/Headline.tsx

@@ -13,11 +13,10 @@ export default function Headline({
 }: HeadlineProps) {
   return (
     <label htmlFor={questionId} className="text-heading mb-1.5 block text-base font-semibold leading-6">
-      <div
-        className={`flex items-center  ${alignTextCenter ? "justify-center" : "mr-[3ch] justify-between"}`}>
+      <div className={`flex items-center  ${alignTextCenter ? "justify-center" : "justify-between"}`}>
         {headline}
         {!required && (
-          <span className="text-info-text self-start	text-sm font-normal leading-7" tabIndex={-1}>
+          <span className="text-info-text ml-2 self-start text-sm font-normal leading-7" tabIndex={-1}>
             Optional
           </span>
         )}