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

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

@@ -58,19 +58,19 @@ export default function Modal({
     };
   };
 
-  const scalingClasses = calculateScaling();
-
-  useEffect(() => {
-    const handleResize = () => setWindowWidth(window.innerWidth);
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
+  const scalingClasses = useMemo(() => calculateScaling(), [windowWidth, previewMode]);
+  
   const highlightBorderColorStyle = useMemo(() => {
     if (!highlightBorderColor)
       return {
         overflow: "auto",
       };
+  
+    return {
+      border: `2px solid ${highlightBorderColor}`,
+      overflow: "auto",
+    };
+  }, [highlightBorderColor]);
 
     return {
       border: `2px solid ${highlightBorderColor}`,

packages/surveys/src/components/questions/OpenTextQuestion.tsx

@@ -40,18 +40,18 @@ export default function OpenTextQuestion({
 
   useTtc(question.id, ttc, setTtc, startTime, setStartTime);
 
-  const handleInputChange = useCallback((inputValue: string) => {
+  const handleInputChange = (inputValue: string) => {
     onChange({ [question.id]: inputValue });
-  }, [onChange, question.id]);
-  
-  const handleInputResize = useCallback((event: { target: any }) => {
+  };
+
+  const handleInputResize = (event: { target: any }) => {
     let maxHeight = 160; // 8 lines
     const textarea = event.target;
     textarea.style.height = "auto";
     const newHeight = Math.min(textarea.scrollHeight, maxHeight);
     textarea.style.height = `${newHeight}px`;
     textarea.style.overflow = newHeight >= maxHeight ? "auto" : "hidden";
-  }, []);
+  };
 
   const openTextRef = useCallback(
     (currentElement: HTMLInputElement | HTMLTextAreaElement | null) => {