Edit apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx

apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx

@@ -122,23 +122,23 @@ const previewSurvey = {
   segment: null,
 };
 
+const StylingSettings = ({...props}) => {
+  // ... styling settings code ...
+};
+
+const SurveyPreview = ({...props}) => {
+  // ... survey preview code ...
+};
+
 const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
-  const router = useRouter();
-  const [unifiedStyling, setUnifiedStyling] = useState(product.styling?.unifiedStyling ?? false);
-  const [allowStyleOverwrite, setAllowStyleOverwrite] = useState(
-    product.styling?.allowStyleOverwrite ?? false
+  // ...
+  return (
+    <div className="flex">
+      <StylingSettings {...props} />
+      <SurveyPreview {...props} />
+    </div>
   );
-  const [brandColor, setBrandColor] = useState(
-    product.styling?.brandColor?.light ?? colorDefaults.brandColor
-  );
-  const [questionColor, setQuestionColor] = useState(
-    product.styling?.questionColor?.light ?? colorDefaults.questionColor
-  );
-  const [inputColor, setInputColor] = useState(
-    product.styling?.inputColor?.light ?? colorDefaults.inputColor
-  );
-  const [inputBorderColor, setInputBorderColor] = useState(
-    product.styling?.inputBorderColor?.light ?? colorDefaults.inputBorderColor
+};
   );
   const [cardBackgroundColor, setCardBackgroundColor] = useState(
     product.styling?.cardBackgroundColor?.light ?? colorDefaults.cardBackgroundColor

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

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