feat: refactor compareLayout styles for improved layout and responsiveness

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, Suspense } from "react";
 import {
   CompareLayoutIcon,
   LayoutIcon,
@@ -9,6 +9,7 @@ import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
 import RegularDropDown from "../inputs/RegularDropDown";
 import { useProductStore } from "../../../store/simulation/useProductStore";
+import Scene from "../../../modules/scene/scene";
 
 interface Layout {
   id: number;
@@ -90,6 +91,7 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
       window.removeEventListener("mouseup", handleMouseUp);
       document.body.classList.remove("resizing-active");
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isResizing]);
 
   // Maintain proportional width on window resize
@@ -120,10 +122,22 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
       ref={wrapperRef}
       style={{ width }}
     >
+      <button
+        title="resize-canvas"
+        id="compare-resize-slider-btn"
+        className="resizer"
+        onMouseDown={handleStartResizing}
+      >
+        <ResizerIcon />
+      </button>
       <div className="chooseLayout-container">
-        <div className="resizer" onMouseDown={handleStartResizing}>
+        {selectedLayout && (
-          <ResizerIcon />
+          <div className="compare-layout-canvas-container">
-        </div>
+            {/*<Suspense fallback={null}>
+              <Scene />
+            </Suspense> */}
+          </div>
+        )}
 
         {width !== "0px" &&
           !selectedLayout && ( // Show only if no layout selected