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;