diff --git a/packages/surveys/src/components/general/render-survey.test.tsx b/packages/surveys/src/components/general/render-survey.test.tsx
index 56dd9a0956..7b8f0f2eb8 100644
--- a/packages/surveys/src/components/general/render-survey.test.tsx
+++ b/packages/surveys/src/components/general/render-survey.test.tsx
@@ -23,10 +23,26 @@ vi.mock("./survey", () => ({
   },
 }));
 
+// Mock ResizeObserver
+let resizeCallback: Function | undefined;
+const ResizeObserverMock = vi.fn((callback) => {
+  resizeCallback = callback;
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
+global.ResizeObserver = ResizeObserverMock as any;
+
 describe("RenderSurvey", () => {
   beforeEach(() => {
     surveySpy.mockClear();
     vi.useFakeTimers();
+    // Reset styles on documentElement before each test
+    document.documentElement.style.removeProperty("--fb-survey-card-max-height");
+    document.documentElement.style.removeProperty("--fb-survey-card-min-height");
+    resizeCallback = undefined; // Reset callback for each test
   });
 
   afterEach(() => {
@@ -155,12 +171,14 @@ describe("RenderSurvey", () => {
       mode: "modal",
     } as any;
 
-    const { container } = render(<RenderSurvey {...propsForLinkSurvey} />);
-    const surveyContainerWrapper = container.querySelector('[data-testid="container"]');
-    expect(surveyContainerWrapper).toHaveStyle({
-      "--fb-survey-card-max-height": "56dvh",
-      "--fb-survey-card-min-height": "0dvh",
-    });
+    render(<RenderSurvey {...propsForLinkSurvey} />);
+    // Manually trigger the ResizeObserver callback if it was captured
+    if (resizeCallback) {
+      resizeCallback();
+    }
+
+    expect(document.documentElement.style.getPropertyValue("--fb-survey-card-max-height")).toBe("56dvh");
+    expect(document.documentElement.style.getPropertyValue("--fb-survey-card-min-height")).toBe("0");
   });
 
   test("should apply correct styles for app (non-link) surveys", () => {
@@ -175,11 +193,13 @@ describe("RenderSurvey", () => {
       mode: "modal",
     } as any;
 
-    const { container } = render(<RenderSurvey {...propsForAppSurvey} />);
-    const surveyContainerWrapper = container.querySelector('[data-testid="container"]');
-    expect(surveyContainerWrapper).toHaveStyle({
-      "--fb-survey-card-max-height": "25dvh",
-      "--fb-survey-card-min-height": "25dvh",
-    });
+    render(<RenderSurvey {...propsForAppSurvey} />);
+    // Manually trigger the ResizeObserver callback if it was captured
+    if (resizeCallback) {
+      resizeCallback();
+    }
+
+    expect(document.documentElement.style.getPropertyValue("--fb-survey-card-max-height")).toBe("40dvh");
+    expect(document.documentElement.style.getPropertyValue("--fb-survey-card-min-height")).toBe("40dvh");
   });
 });
diff --git a/packages/surveys/src/components/general/render-survey.tsx b/packages/surveys/src/components/general/render-survey.tsx
index 0cf02957ab..bf3d32a229 100644
--- a/packages/surveys/src/components/general/render-survey.tsx
+++ b/packages/surveys/src/components/general/render-survey.tsx
@@ -5,38 +5,30 @@ import { Survey } from "./survey";
 
 export function RenderSurvey(props: Readonly<SurveyContainerProps>) {
   const [isOpen, setIsOpen] = useState(true);
-  const [isDesktop, setIsDesktop] = useState(false);
 
   // Check viewport width on mount and resize
-  useEffect(() => {
-    const checkViewportWidth = () => {
-      setIsDesktop(window.innerWidth > 768);
-    };
-    checkViewportWidth();
-    window.addEventListener("resize", checkViewportWidth);
-
-    return () => {
-      window.removeEventListener("resize", checkViewportWidth);
-    };
-  }, []);
-
-  // Determine styles based on survey type
   useEffect(() => {
     const root = document.documentElement;
-    if (props.survey.type === "link") {
-      root.style.setProperty("--fb-survey-card-max-height", isDesktop ? "56dvh" : "60dvh");
-      root.style.setProperty("--fb-survey-card-min-height", isDesktop ? "0" : "42dvh");
-    } else {
-      root.style.setProperty("--fb-survey-card-max-height", "40dvh");
-      root.style.setProperty("--fb-survey-card-min-height", "40dvh");
-    }
+    const resizeObserver = new ResizeObserver(() => {
+      const isDesktop = window.innerWidth > 768;
+
+      if (props.survey.type === "link") {
+        root.style.setProperty("--fb-survey-card-max-height", isDesktop ? "56dvh" : "60dvh");
+        root.style.setProperty("--fb-survey-card-min-height", isDesktop ? "0" : "42dvh");
+      } else {
+        root.style.setProperty("--fb-survey-card-max-height", "40dvh");
+        root.style.setProperty("--fb-survey-card-min-height", "40dvh");
+      }
+    });
+
+    resizeObserver.observe(document.body);
 
-    // Clean up when component unmounts
     return () => {
+      resizeObserver.disconnect();
       root.style.removeProperty("--fb-survey-card-max-height");
       root.style.removeProperty("--fb-survey-card-min-height");
     };
-  }, [props.survey.type, isDesktop]);
+  }, [props.survey.type]);
 
   const close = () => {
     setIsOpen(false);