From 0b9e894341bb2e6c29e38e417178a654bee0e40c Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 28 May 2025 11:02:12 +0530
Subject: [PATCH] feat: refactor compareLayout styles for improved layout and
 responsiveness

---
 .../ui/compareVersion/CompareLayOut.tsx       |   22 +-
 app/src/styles/layout/compareLayout.scss      | 1073 ++++++++---------
 2 files changed, 521 insertions(+), 574 deletions(-)

diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index b857c13..00480bc 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/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}>
-          <ResizerIcon />
-        </div>
+        {selectedLayout && (
+          <div className="compare-layout-canvas-container">
+            {/*<Suspense fallback={null}>
+              <Scene />
+            </Suspense> */}
+          </div>
+        )}
 
         {width !== "0px" &&
           !selectedLayout && ( // Show only if no layout selected
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index b78772c..e17f227 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -2,652 +2,585 @@
 @use "../abstracts/mixins" as *;
 
 .initial-selectLayout-wrapper {
-    position: fixed;
-    top: 100px;
-    left: 40px;
-    z-index: 10;
+  position: fixed;
+  top: 100px;
+  left: 40px;
+  z-index: 10;
 
-    .regularDropdown-container {
-        background: var(--background-color);
-    }
+  .regularDropdown-container {
+    background: var(--background-color);
+  }
 }
 
 .compareLayOut-wrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 2;
-    height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  height: 100vh;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: slideInFromRight 0.4s ease-out forwards;
+  user-select: none;
+
+  .selectLayout-wrapper {
+    position: absolute;
+    top: 100px;
+    right: 40px;
+
+    .regularDropdown-container {
+      background: var(--background-color);
+    }
+  }
+
+  .resizer {
+    width: 32px;
+    height: 32px;
+    @include flex-center;
+    padding: 6px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
     background: var(--background-color);
     backdrop-filter: blur(20px);
+    box-shadow: $box-shadow-heavy;
+    border-radius: 50%;
+    cursor: ew-resize;
+    transition: transform 0.1s ease;
+    z-index: 10;
+  }
+
+  .chooseLayout-container {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    animation: slideInFromRight 0.4s ease-out forwards;
-    user-select: none;
+    position: relative;
+    overflow: hidden;
 
-
-    .selectLayout-wrapper {
-
-        position: absolute;
-        top: 100px;
-        right: 40px;
-
-        .regularDropdown-container {
-            background: var(--background-color);
-        }
+    .compare-layout-canvas-container {
+      position: absolute;
+      height: 100vh;
+      width: 100vw;
+      top: 0;
+      right: 0;
     }
 
-    .chooseLayout-container {
+    .chooseLayout-wrapper {
+      background: var(--background-color);
+      backdrop-filter: blur(20px);
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: $box-shadow-medium;
+      max-width: 80%;
+      text-align: center;
+      position: relative;
+
+      .icon {
         width: 100%;
-        height: 100%;
+        margin-bottom: 15px;
+        text-align: center;
+
+        svg {
+          width: 100%;
+        }
+      }
+
+      .value {
+        margin-bottom: 15px;
+        font-size: var(--font-size-small);
+        font-weight: 500;
+        color: var(--text-primary);
+      }
+
+      button {
+        display: block;
+        margin: 0 auto;
+        padding: 8px 16px;
+        background: var(--background-color-button);
+        color: var(--icon-default-color-active);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+        }
+      }
+
+      .displayLayouts-container {
+        max-width: 170px;
+        height: auto;
+        background: var(--background-color);
+        backdrop-filter: blur(20px);
+        padding: 6px;
+        border-radius: 8px;
+        box-shadow: $box-shadow-medium;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        transform: translate(50%, -10px);
         display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-
-        .resizer {
-            width: 32px;
-            height: 32px;
-            @include flex-center;
-            padding: 6px;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            transform: translate(-50%, -50%);
-            background: var(--background-color);
-            backdrop-filter: blur(20px);
-            box-shadow: $box-shadow-heavy;
-            border-radius: 50%;
-            cursor: ew-resize;
-            transition: transform 0.1s ease;
-            z-index: 10;
-
-
+        flex-direction: column;
+        gap: 6px;
 
+        .header {
+          text-align: left;
+          padding-top: 6px;
+          padding-left: 6px;
         }
 
-        .chooseLayout-wrapper {
-            background: var(--background-color);
-            backdrop-filter: blur(20px);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: $box-shadow-medium;
-            max-width: 80%;
-            text-align: center;
-            position: relative;
+        .search-wrapper {
+          padding: 6px 0;
 
-            .icon {
-                width: 100%;
-                margin-bottom: 15px;
-                text-align: center;
-
-                svg {
-
-                    width: 100%;
-                }
-
-            }
-
-            .value {
-                margin-bottom: 15px;
-                font-size: var(--font-size-small);
-                font-weight: 500;
-                color: var(--text-primary);
-            }
-
-            button {
-                display: block;
-                margin: 0 auto;
-                padding: 8px 16px;
-                background: var(--background-color-button);
-                color: var(--icon-default-color-active);
-                border: none;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: all 0.2s ease;
-
-                &:hover {
-
-                    transform: translateY(-1px);
-                }
-
-
-
-            }
-
-            .displayLayouts-container {
-                max-width: 170px;
-                height: auto;
-                background: var(--background-color);
-                backdrop-filter: blur(20px);
-                padding: 6px;
-                border-radius: 8px;
-                box-shadow: $box-shadow-medium;
-                position: absolute;
-                right: 0;
-                top: 100%;
-                transform: translate(50%, -10px);
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-
-                .header {
-                    text-align: left;
-                    padding-top: 6px;
-                    padding-left: 6px;
-                }
-
-                .search-wrapper {
-                    padding: 6px 0;
-
-                    .search-container {
-                        padding: 0;
-                        border-radius: 6px;
-                    }
-                }
-
-                .layouts-container {
-                    .layout {
-
-                        padding: 6px 0;
-                    }
-
-                    .layout-wrapper {
-                        display: flex;
-                        align-items: center;
-                        gap: 6px;
-                        cursor: pointer;
-                        padding: 0 10px;
-                        background: none;
-                        width: 100%;
-
-                        &:hover {
-                            background-color: var(--highlight-text-color) !important;
-                            border-radius: 4px;
-
-                            .layout {
-                                color: var(--text-button-color) !important;
-
-                            }
-
-                            svg {
-
-                                path {
-
-                                    fill: var(--text-button-color) !important;
-                                }
-                            }
-
-                            .layout {
-
-                                color: var(--background-color-accent);
-                            }
-                        }
-                    }
-                }
-            }
+          .search-container {
+            padding: 0;
+            border-radius: 6px;
+          }
         }
+
+        .layouts-container {
+          .layout {
+            padding: 6px 0;
+          }
+
+          .layout-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            padding: 0 10px;
+            background: none;
+            width: 100%;
+
+            &:hover {
+              background-color: var(--highlight-text-color) !important;
+              border-radius: 4px;
+
+              .layout {
+                color: var(--text-button-color) !important;
+              }
+
+              svg {
+                path {
+                  fill: var(--text-button-color) !important;
+                }
+              }
+            }
+          }
+        }
+      }
     }
-
-
-
+  }
 }
 
 .compare-result-container {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    position: fixed;
-    bottom: 40px;
-    width: 100%;
-    min-height: 200px;
-    z-index: 10;
-    background: var(--background-color-secondary);
-    backdrop-filter: blur(20px);
-    padding: 18px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: fixed;
+  bottom: 40px;
+  width: 100%;
+  min-height: 200px;
+  z-index: 10;
+  background: var(--background-color-secondary);
+  backdrop-filter: blur(20px);
+  padding: 18px 8px;
 
-    .header {
-        width: fit-content;
-        background-color: var(--background-color-solid);
-        color: var(--background-color-accent);
-        padding: 6px 10px;
-        border-radius: 6px;
+  .header {
+    width: fit-content;
+    background-color: var(--background-color-solid);
+    color: var(--background-color-accent);
+    padding: 6px 10px;
+    border-radius: 6px;
+  }
+
+  .compare-result-wrapper {
+    display: flex;
+    gap: 12px;
+
+    .comparisionCard {
+      position: relative;
+      flex: 1;
+      width: auto;
+      max-height: 200px;
+      background: var(--background-color);
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      border-radius: 12px;
+      padding: 8px 12px;
+      overflow: hidden;
     }
 
-    .compare-result-wrapper {
+    .performanceResult-wrapper {
+      min-width: 328px;
+      flex: 0;
+      position: relative;
+      padding-right: 65px;
+
+      .header {
         display: flex;
         gap: 12px;
+        align-items: center;
+      }
 
-        .comparisionCard {
-            position: relative;
-            flex: 1;
-            width: auto;
-            max-height: 200px;
-            background: var(--background-color);
-            outline: 1px solid var(--border-color);
-            outline-offset: -1px;
-            border-radius: 12px;
-            padding: 8px 12px;
-            overflow: hidden;
+      .metrics-container {
+        display: flex;
+        gap: 12px;
+        height: 100%;
+
+        .metrics-left {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: 100%;
+
+          .metric {
+            .metric-label {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+
+              span {
+                display: flex;
+              }
+            }
+            .metric-value {
+              padding-top: 6px;
+              font-size: var(--font-size-xlarge);
+              color: var(--background-color-accent);
+              font-weight: 600;
+            }
+          }
+
+          .label {
+            padding-bottom: 68px;
+          }
         }
 
-        .performanceResult-wrapper {
-            min-width: 328px;
-            flex: 0;
+        .metrics-right {
+          height: fit-content;
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: repeat(2, 1fr);
+
+          gap: 2px;
+          overflow: visible;
+
+          margin: auto 0;
+
+          .metric-wrapper {
             position: relative;
-            padding-right: 65px;
+            width: 64px;
+            height: 50px;
+            overflow: visible; // allow content like labels to overflow
 
-            .header {
-
-                display: flex;
-                gap: 12px;
-                align-items: center;
-            }
-
-            .metrics-container {
-                display: flex;
-                gap: 12px;
-                height: 100%;
-
-                .metrics-left {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    height: 100%;
-
-                    .metric {
-                        .metric-label {
-                            display: flex;
-                            align-items: center;
-                            gap: 6px;
-
-                            span {
-                                display: flex;
-                            }
-                        }
-
-                        .metric-value {
-                            padding-top: 6px;
-                            font-size: var(--font-size-xlarge);
-                            color: var(--background-color-accent);
-                            font-weight: 600;
-                        }
-                    }
-
-                    .label {
-                        padding-bottom: 68px;
-                    }
-                }
-
-                .metrics-right {
-                    height: fit-content;
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr);
-                    grid-template-rows: repeat(2, 1fr);
-
-                    gap: 2px;
-                    overflow: visible;
-
-                    margin: auto 0;
-
-                    .metric-wrapper {
-                        position: relative;
-                        width: 64px;
-                        height: 50px;
-                        overflow: visible; // allow content like labels to overflow
-
-                        &:nth-child(1) {
-                            &::after {
-
-                                content: "";
-                                position: absolute;
-
-                                top: -100%;
-                                left: 50%;
-                                width: 100%; // Required for visible shape
-                                height: 40px;
-                                background-color: #B7B7C6;
-
-                                // Custom polygon shape (adjust if needed)
-                                clip-path: polygon(96% 52%, 96% 54%, 45% 53%, 3% 100%, 0 100%, 42% 52%);
-
-
-                                z-index: 0; // Behind any inner content
-                            }
-                        }
-
-                        // Optional: content above the shape
-                        >* {
-                            position: relative;
-                            z-index: 1;
-                        }
-                    }
-
-
-                    .metric-label {
-                        position: absolute;
-                        top: 0px;
-                        left: 0%;
-                        white-space: nowrap;
-
-                        transform: translate(-50%, -50%);
-
-                        font-size: 10px;
-                        z-index: 1;
-                    }
-
-                    .metric-wrapper {
-
-                        &:nth-child(1) {
-                            .metric-label {
-                                top: -57%;
-                                left: 220%;
-                            }
-                        }
-
-                        &:nth-child(2) {
-                            .metric-label {
-                                white-space: normal;
-                                width: 50px;
-                                // top: -50%;
-                                left: 230%;
-                            }
-                        }
-                    }
-
-                    .metric {
-                        width: 100%;
-                        height: 100%;
-                        position: relative;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-
-                        &::after {
-                            content: "";
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            width: 100%;
-                            height: 100%;
-
-                            background: var(--background-color, wheat);
-                            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-                            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
-                            //                         backdrop-filter: blur(20px);
-                            // filter: drop-shadow(30px 10px 4px #4444dd);
-                            z-index: 0;
-                        }
-
-                        // Content stays above the shape
-                        >* {
-                            position: relative;
-                            z-index: 1;
-                        }
-                    }
-
-
-                    .metric-wrapper:nth-child(2) {
-                        grid-column-start: 1;
-                        grid-row-start: 2;
-                    }
-
-                    .metric-wrapper:nth-child(3) {
-                        grid-row: span 2 / span 2;
-                        grid-column-start: 2;
-                        grid-row-start: 1;
-                        margin-top: 40%;
-                        left: -16px;
-                        position: relative;
-                    }
-                }
-
-
-            }
-
-            .simulation-tag {
-
-                background: var(--background-color-button);
-
-                color: var(--icon-default-color-active);
+            &:nth-child(1) {
+              .metric-label {
+                top: -57%;
+                left: 220%;
+              }
+              &::after {
+                content: "";
                 position: absolute;
-                bottom: 0;
-                right: 0;
-                padding: 10px 5px;
-                border-radius: 12px 0 0 0;
+
+                top: -100%;
+                left: 50%;
+                width: 100%; // Required for visible shape
+                height: 40px;
+                background-color: #b7b7c6;
+
+                // Custom polygon shape (adjust if needed)
+                clip-path: polygon(
+                  96% 52%,
+                  96% 54%,
+                  45% 53%,
+                  3% 100%,
+                  0 100%,
+                  42% 52%
+                );
+
+                z-index: 0; // Behind any inner content
+              }
             }
+
+            // Optional: content above the shape
+            > * {
+              position: relative;
+              z-index: 1;
+            }
+
+            &:nth-child(2) {
+              grid-column-start: 1;
+              grid-row-start: 2;
+              .metric-label {
+                white-space: normal;
+                width: 50px;
+                left: 230%;
+              }
+            }
+            &:nth-child(3) {
+              grid-row: span 2 / span 2;
+              grid-column-start: 2;
+              grid-row-start: 1;
+              margin-top: 40%;
+              left: -16px;
+              position: relative;
+            }
+          }
+
+          .metric-label {
+            position: absolute;
+            top: 0px;
+            left: 0%;
+            white-space: nowrap;
+
+            transform: translate(-50%, -50%);
+
+            font-size: 10px;
+            z-index: 1;
+          }
+
+          .metric {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &::after {
+              content: "";
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+
+              background: var(--background-color, wheat);
+              clip-path: polygon(
+                25% 0%,
+                75% 0%,
+                100% 50%,
+                75% 100%,
+                25% 100%,
+                0% 50%
+              );
+              filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
+
+              z-index: 0;
+            }
+
+            // Content stays above the shape
+            > * {
+              position: relative;
+              z-index: 1;
+            }
+          }
         }
+      }
 
+      .simulation-tag {
+        background: var(--background-color-button);
+
+        color: var(--icon-default-color-active);
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: 10px 5px;
+        border-radius: 12px 0 0 0;
+      }
     }
+  }
 }
 
-
-
-
 @keyframes slideInFromRight {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
 
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
-
-// body.compare-layout-open {
-//     main {
-//         padding-right: 10px;
-
-//         transition: padding 0.3s ease;
-//     }
-// }
-
 .energy-usage {
-    position: relative;
+  position: relative;
 
-    .energy-usage-wrapper {
-        h4 {
-            font-weight: 600;
-        }
-
-        .value {
-            padding-top: 25px;
-            font-size: var(--font-size-xxxlarge);
-            color: var(--background-color-accent);
-        }
+  .energy-usage-wrapper {
+    h4 {
+      font-weight: 600;
     }
 
-    .simulation-details {
-        position: absolute;
-        bottom: 12px;
-        right: 12px;
-
-        .simulation-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-
-            .icon {
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                background-color: var(--background-color-accent);
-            }
-        }
+    .value {
+      padding-top: 25px;
+      font-size: var(--font-size-xxxlarge);
+      color: var(--background-color-accent);
     }
+  }
 
-    .chart {
-        height: 100%;
-        width: 90%;
-        position: absolute;
-        top: 10px;
-        left: 0;
-        margin-bottom: 20px;
-        padding: 20px;
+  .simulation-details {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+
+    .simulation-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: var(--background-color-accent);
+      }
     }
+  }
+
+  .chart {
+    width: 90%;
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
 }
 
 .throughPutCard-container {
+  .layers-wrapper {
+    padding: 20px 10px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
 
-    .layers-wrapper {
-        padding: 20px 10px;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
+    .layer-wrapper {
+      display: flex;
+      flex-direction: column;
 
-        .layer-wrapper {
-            display: flex;
-            flex-direction: column;
-
-            &:last-child {
-                justify-content: end;
-            }
-        }
+      &:last-child {
+        justify-content: end;
+      }
     }
+  }
 
-    .chart {
-        height: 90%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-    }
+  .chart {
+    height: 90%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 }
 
 .cycle-time-container {
-    .cycle-main {
+  .cycle-main {
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+
+    .layers-wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .layers {
         display: flex;
-        justify-content: space-between;
-        height: 100%;
+        flex-direction: column;
+        gap: 4px;
 
-        .layers-wrapper {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            .layers {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-
-                .layer-name {
-                    color: var(--background-color-accent);
-                }
-
-                .layer-time {
-                    font-size: var(--font-size-large);
-                }
-
-                .layer-profit {
-                    color: #14CA44;
-                    text-align: end;
-
-                    span {
-                        color: #14CA44;
-                    }
-                }
-            }
+        .layer-name {
+          color: var(--background-color-accent);
         }
+
+        .layer-time {
+          font-size: var(--font-size-large);
+        }
+
+        .layer-profit {
+          color: #14ca44;
+          text-align: end;
+
+          span {
+            color: #14ca44;
+          }
+        }
+      }
     }
+  }
 }
 
 .overallDowntime-container {
-    .totalDownTime-wrapper {
+  .totalDownTime-wrapper {
+    display: flex;
+
+    .totalDownTime {
+      width: 70%;
+      background: var(--background-color-secondary);
+      backdrop-filter: blur(20px);
+      border-radius: 12px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 20px;
+      padding: 8px 10px;
+      margin: 44px 0;
+
+      .totalDownTime-right {
         display: flex;
-        height: auto;
-        width: 100%;
-        justify-content: space-between;
+        flex-direction: column;
+        gap: 6px;
+      }
 
-        .totalDownTime {
-            width: 70%;
-            background: var(--background-color-secondary);
-            backdrop-filter: blur(20px);
-            border-radius: 12px;
+      .totalDownTime-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
 
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 20px;
-            padding: 8px 10px;
-            margin: 44px 0;
-
-            .totalDownTime-right {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-            }
-
-            .totalDownTime-left {
-                display: flex;
-                align-items: center;
-                gap: 6px;
-
-                .value {
-                    font-size: var(--font-size-xlarge);
-                    color: var(--background-color-button);
-                }
-            }
-        }
-
-        .chart {
-            height: auto;
-            width: 30%;
-            width: 20px;
-            position: relative;
-            perspective: 800px;
-            /* Enables 3D viewing */
-
-
-            .vertical-chart {
-                height: 100%;
-                display: flex;
-                flex-direction: column-reverse;
-                gap: 6px;
-
-                .layout2 {
-                    transform-style: preserve-3d;
-                    transform: rotateX(15deg);
-                    /* 3D tilt */
-                    height: 20%;
-                    background-color: #F3A60D;
-                }
-
-                .layout1 {
-                    height: 80%;
-                    background-color: #6F42C1;
-                }
-            }
+        .value {
+          font-size: var(--font-size-xlarge);
+          color: var(--background-color-button);
         }
+      }
     }
+
+    .chart {
+      width: 30%;
+      position: relative;
+    }
+  }
 }
 
 .overallScrapRate {
-    .overallScrapRate-wrapper {
-        display: flex;
+  .overallScrapRate-wrapper {
+    display: flex;
 
-        .overallScrapRate-value {
-            width: 50%;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            margin: 40px 0;
+    .overallScrapRate-value {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin: 40px 0;
 
-            .overallScrapRate-key {
-
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .chart {
-            width: 50%;
-            position: relative;
-        }
+      .overallScrapRate-key {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
-}
\ No newline at end of file
+
+    .chart {
+      width: 50%;
+      position: relative;
+    }
+  }
+}