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

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

@@ -191,49 +191,49 @@ const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
     }
   }, [unifiedStyling]);
 
-  const onSave = useCallback(async () => {
-      await updateProductAction(product.id, {
-        styling: {
-          unifiedStyling,
-          allowStyleOverwrite,
-          brandColor: {
-            light: brandColor,
-            dark: brandColorDark,
-          },
-          questionColor: {
-            light: questionColor,
-            dark: questionColorDark,
-          },
-          inputColor: {
-            light: inputColor,
-            dark: inputColorDark,
-          },
-          inputBorderColor: {
-            light: inputBorderColor,
-            dark: inputBorderColorDark,
-          },
-          cardBackgroundColor: {
-            light: cardBackgroundColor,
-            dark: cardBackgroundColorDark,
-          },
-          highlightBorderColor: allowHighlightBorder
-            ? {
-                light: highlightBorderColor,
-                dark: highlightBorderColorDark,
-              }
-            : undefined,
-          isDarkModeEnabled: isDarkMode,
-          roundness,
-          cardArrangement: {
-            linkSurveys: linkSurveysCardArrangement,
-            inAppSurveys: inAppSurveysCardArrangement,
-          },
+  const onSave = async () => {
+    await updateProductAction(product.id, {
+      styling: {
+        unifiedStyling,
+        allowStyleOverwrite,
+        brandColor: {
+          light: brandColor,
+          dark: brandColorDark,
         },
-      });
-  
-      toast.success("Styling updated successfully.");
-      router.refresh();
-    }, [unifiedStyling, allowStyleOverwrite, brandColor, brandColorDark, questionColor, questionColorDark, inputColor, inputColorDark, inputBorderColor, inputBorderColorDark, cardBackgroundColor, cardBackgroundColorDark, allowHighlightBorder, highlightBorderColor, highlightBorderColorDark, isDarkMode, roundness, linkSurveysCardArrangement, inAppSurveysCardArrangement]);
+        questionColor: {
+          light: questionColor,
+          dark: questionColorDark,
+        },
+        inputColor: {
+          light: inputColor,
+          dark: inputColorDark,
+        },
+        inputBorderColor: {
+          light: inputBorderColor,
+          dark: inputBorderColorDark,
+        },
+        cardBackgroundColor: {
+          light: cardBackgroundColor,
+          dark: cardBackgroundColorDark,
+        },
+        highlightBorderColor: allowHighlightBorder
+          ? {
+              light: highlightBorderColor,
+              dark: highlightBorderColorDark,
+            }
+          : undefined,
+        isDarkModeEnabled: isDarkMode,
+        roundness,
+        cardArrangement: {
+          linkSurveys: linkSurveysCardArrangement,
+          inAppSurveys: inAppSurveysCardArrangement,
+        },
+      },
+    });
+
+    toast.success("Styling updated successfully.");
+    router.refresh();
+  };
 
   return (
     <div className="flex">

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}`,