feat: update ComparisonResult and EnergyUsage components with new chart layouts and styling adjustments

app/src/styles/layout/compareLayout.scss

@@ -481,10 +481,13 @@
     }
 
     .chart {
+        height: 100%;
         width: 90%;
         position: absolute;
         top: 10px;
         left: 0;
+        margin-bottom: 20px;
+        padding: 20px;
     }
 }
 
@@ -556,6 +559,9 @@
 .overallDowntime-container {
     .totalDownTime-wrapper {
         display: flex;
+        height: auto;
+        width: 100%;
+        justify-content: space-between;
 
         .totalDownTime {
             width: 70%;
@@ -589,8 +595,33 @@
         }
 
         .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;
+                }
+            }
         }
     }
 }