From ae11da2bc7706415f7b0e643f34e453919ade07e Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Sat, 12 Oct 2024 11:53:52 -0500
Subject: [PATCH] Fix the styles overriding previous styles

If there were two inputs sending styles to the same target (ie row and column gap), they would override each other.

This change fixes that by deepening the merges.  Admittedly, I turned to cGPT to help me with this as the nesting was throwing me for a loop.  It works, though, and I understand it now that I can read it.
---
 client/homebrew/brewRenderer/brewRenderer.jsx | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 3ceb5846a..34d16d09e 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -64,9 +64,9 @@ const BrewRenderer = (props)=>{
 	};
 
 	const [state, setState] = useState({
-		isMounted  : false,
-		visibility : 'hidden',
-		zoom       : 100,
+		isMounted     : false,
+		visibility    : 'hidden',
+		zoom          : 100,
 		previewStyles : {}
 	});
 
@@ -175,12 +175,26 @@ const BrewRenderer = (props)=>{
 	};
 
 	const handleStyle = (newStyle)=>{
-		setState((prevState)=>({
-			...prevState,
-			previewStyles : { ...prevState.previewStyles, ...newStyle }, 
-		}));
+		setState((prevState)=>{
+			// Merge styles, skipping those that are empty objects or null
+			const mergedStyles = Object.entries(newStyle).reduce((acc, [selector, style])=>{
+				if(style && Object.keys(style).length > 0) {
+					acc[selector] = {
+						...(prevState.previewStyles[selector] || {}), // Preserve existing styles
+						...style, // Add or override with new styles
+					};
+				} else {
+					// If the style is an empty object or null, delete the selector
+					delete acc[selector];
+				}
+				return acc;
+			}, { ...prevState.previewStyles });
+
+			return { ...prevState, previewStyles: mergedStyles };
+		});
 	};
 
+
 	const styleObject = {};
 
 	if(global.config.deployment) {