feat: Enhance MainScene with comparison product handling and update styles for layout components

app/src/components/layout/scenes/MainScene.tsx

@@ -52,7 +52,7 @@ function MainScene() {
   const { visualizationSocket } = useSocketStore();
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
-  const { clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, clearComparisonProduct } = useComparisonProduct();
   const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
   const { setName } = useAssetsStore();
   const { projectId } = useParams()
@@ -120,7 +120,9 @@ function MainScene() {
         </>
       )}
       <div
-        className="scene-container"
+        className={`scene-container${
+          comparisonProduct?.productUuid ? " half-view" : ""
+        }`}
         id="work-space-three-d-canvas"
         style={{
           height: isPlaying || activeModule !== "visualization" ? "100vh" : "",

app/src/styles/base/global.scss

@@ -28,6 +28,9 @@ section,
     border: none;
   }
 }
+.scene-container.half-view{
+  width: 50vw !important;
+}
 
 .tooltip {
   position: absolute;

app/src/styles/layout/compareLayout.scss

@@ -55,7 +55,8 @@
     cursor: ew-resize;
     transition: transform 0.1s ease;
     z-index: 100;
-        pointer-events: all;
+    // pointer-events: all;
+    opacity: 0;
   }
 
   .chooseLayout-container {
@@ -70,7 +71,7 @@
     .compare-layout-canvas-container {
       position: absolute;
       height: 100vh;
-            width: 100vw;
+      width: 50vw;
       top: 0;
       right: 0;
     }
@@ -165,9 +166,7 @@
             width: 100%;
 
             &:hover {
-                            background-color: var(
-                                --highlight-text-color
-                            ) !important;
+              background-color: var(--highlight-text-color) !important;
               border-radius: 4px;
 
               .layout {
@@ -431,8 +430,6 @@
   position: relative;
 
   .energy-usage-wrapper {
-
-
     .value {
       padding-top: 25px;
       font-size: var(--font-size-xxxlarge);