From 7c1110239b56fcb260202900a4b15603408c372b Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Fri, 29 Aug 2025 14:21:40 +0530
Subject: [PATCH] fix: mobile preview on large screens (#6478)

---
 apps/web/modules/ui/components/media-background/index.test.tsx | 2 +-
 apps/web/modules/ui/components/media-background/index.tsx      | 3 ++-
 apps/web/modules/ui/components/preview-survey/index.tsx        | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web/modules/ui/components/media-background/index.test.tsx b/apps/web/modules/ui/components/media-background/index.test.tsx
index 6c61ef36bc..736d3ff814 100644
--- a/apps/web/modules/ui/components/media-background/index.test.tsx
+++ b/apps/web/modules/ui/components/media-background/index.test.tsx
@@ -134,7 +134,7 @@ describe("MediaBackground", () => {
 
     render(<MediaBackground {...props} />);
 
-    const mobileContainer = document.querySelector(".w-\\[22rem\\]");
+    const mobileContainer = document.querySelector("[data-testid='mobile-preview-container']");
     expect(mobileContainer).toBeInTheDocument();
     expect(screen.getByTestId("child-content")).toBeInTheDocument();
   });
diff --git a/apps/web/modules/ui/components/media-background/index.tsx b/apps/web/modules/ui/components/media-background/index.tsx
index 803778b4af..78a1df2c84 100644
--- a/apps/web/modules/ui/components/media-background/index.tsx
+++ b/apps/web/modules/ui/components/media-background/index.tsx
@@ -166,7 +166,8 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
     return (
       <div
         ref={ContentRef}
-        className={`relative h-[90%] max-h-[42rem] w-[22rem] overflow-hidden rounded-[3rem] border-[6px] border-slate-400 ${getFilterStyle()}`}>
+        data-testid="mobile-preview-container"
+        className={`relative h-[90%] w-[45%] 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()}
diff --git a/apps/web/modules/ui/components/preview-survey/index.tsx b/apps/web/modules/ui/components/preview-survey/index.tsx
index 5e232d1a87..e594d8e6c3 100644
--- a/apps/web/modules/ui/components/preview-survey/index.tsx
+++ b/apps/web/modules/ui/components/preview-survey/index.tsx
@@ -289,7 +289,7 @@ export const PreviewSurvey = ({
                       <ClientLogo environmentId={environment.id} projectLogo={project.logo} previewSurvey />
                     )}
                   </div>
-                  <div className="z-10 w-full max-w-md rounded-lg border border-transparent">
+                  <div className="z-10 w-full rounded-lg border border-transparent">
                     <SurveyInline
                       isPreviewMode={true}
                       survey={{ ...survey, type: "link" }}