fix: mobile preview on large screens (#6478)

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();
   });

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()}

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" }}