Refactor Simulations component layout: streamline event handling and add comparison functionality

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -153,13 +153,25 @@ const Simulations: React.FC = () => {
                                         />
                                     </div>
                                     {products.length > 1 && (
-                                        <>
                                         <div
                                             className="remove-button"
                                             onClick={() => handleRemoveProduct(product.productId)}
                                         >
                                             <RemoveIcon />
                                         </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                        <div
+                            className="resize-icon"
+                            id="action-resize"
+                            onMouseDown={(e) => handleResize(e, productsContainerRef)}
+                        >
+                            <ResizeHeightIcon />
+                        </div>
+                    </div>
+                </div>
 
                 <div className="simulation-process section">
                     <button
@@ -171,10 +183,23 @@ const Simulations: React.FC = () => {
                             <ArrowIcon />
                         </div>
                     </button>
-                                                {openObjects && events.map((event, index) => <List key={index} val={event} />)}
+                    {openObjects &&
+                        events.map((event, index) => <List key={index} val={event} />)}
+                </div>
+
+                <div className="compare-simulations-container">
+                    <div className="compare-simulations-header">
+                        Need to Compare Layout?
+                    </div>
+                    <div className="content">
+                        Click <span>'Compare'</span> to review and analyze the layout
+                        differences between them.
+                    </div>
+                    <div className="input">
+                        <input type="button" value={"Compare"} className="submit" />
+                    </div>
+                </div>
             </div>
-                                        </>
-                                    )}
 
             {selectedAsset && (
                 <RenderOverlay>
@@ -196,12 +221,6 @@ const Simulations: React.FC = () => {
                 </RenderOverlay>
             )}
         </div>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     )
 };