From bde1e6318c77678dc6b9d980bd07792dad38373c Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Mon, 7 Apr 2025 18:37:17 +0530
Subject: [PATCH] fix: Adjust panel size calculations and clean up realTimeViz
 styles

---
 app/src/components/ui/componets/Panel.tsx | 19 ++++++++-----------
 app/src/styles/pages/realTimeViz.scss     | 20 +++++---------------
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index 841dd51..d24abcb 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -126,18 +126,17 @@ const Panel: React.FC<PanelProps> = ({
       const bottomActive = previousPanels.includes("bottom");
 
       // Dynamic panel sizes based on canvas width
-      const panelSizeWidth = Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px
-      const panelSizeHeight = Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px
+      const panelSizeWidth = isPlaying ? Math.max(canvasDimensions.width * 0.14, 200) : Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px
+      const panelSizeHeight = isPlaying ? Math.max(canvasDimensions.width * 0.13, 200) : Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px
 
       switch (side) {
         case "top":
         case "bottom":
           return {
             // minWidth: "200px", // Minimum width constraint
-            width: `calc(100% - ${
-              (leftActive ? panelSizeWidth : 0) +
+            width: `calc(100% - ${(leftActive ? panelSizeWidth : 0) +
               (rightActive ? panelSizeWidth : 0)
-            }px)`,
+              }px)`,
             minHeight: "200px", // Minimum height constraint
             height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin
             left: leftActive ? `${panelSizeWidth}px` : "0",
@@ -151,10 +150,9 @@ const Panel: React.FC<PanelProps> = ({
             minWidth: "200px", // Minimum width constraint
             width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin
             // minHeight: "200px", // Minimum height constraint
-            height: `calc(100% - ${
-              (topActive ? panelSizeHeight : 0) +
+            height: `calc(100% - ${(topActive ? panelSizeHeight : 0) +
               (bottomActive ? panelSizeHeight : 0)
-            }px)`,
+              }px)`,
             top: topActive ? `${panelSizeHeight}px` : "0",
             bottom: bottomActive ? `${panelSizeHeight}px` : "0",
             [side]: "0",
@@ -299,9 +297,8 @@ const Panel: React.FC<PanelProps> = ({
       {selectedZone.activeSides.map((side) => (
         <div
           key={side}
-          className={`panel ${side}-panel absolute ${isPlaying ? "" : ""} ${
-            hiddenPanels.includes(side) ? "hidePanel" : ""
-          }`}
+          className={`panel ${side}-panel absolute ${isPlaying ? "" : ""} ${hiddenPanels.includes(side) ? "hidePanel" : ""
+            }`}
           style={getPanelStyle(side)}
           onDrop={(e) => handleDrop(e, side)}
           onDragOver={(e) => e.preventDefault()}
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index f26ac06..c2c0b7b 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -306,7 +306,6 @@
         min-height: 150px;
 
         .chart-container {
-
           min-width: 160px;
         }
       }
@@ -324,14 +323,12 @@
       left: 0;
       top: 0;
       bottom: 0;
-
-
     }
 
     &.right-panel {
       right: 0;
       top: 0;
-      bottom: 0
+      bottom: 0;
     }
 
     &.left-panel,
@@ -342,7 +339,6 @@
         flex-direction: column;
         width: 100%;
 
-
         gap: 6px;
 
         .chart-container {
@@ -355,8 +351,6 @@
           background-color: var(--background-color);
           position: relative;
         }
-
-
       }
     }
   }
@@ -368,8 +362,8 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    bottom: calc(var(--realTimeViz-container-height) * 0.3);
-    bottom: 210px;
+    bottom: calc(var(--realTimeViz-container-height) * 0.25);
+    // bottom: 210px;
   }
 }
 
@@ -658,9 +652,6 @@
         }
       }
     }
-
-
-
   }
 }
 
@@ -756,14 +747,13 @@
 }
 
 .connectionSuccess {
-  outline-color: #43C06D;
+  outline-color: #43c06d;
 }
 
 .connectionFails {
   outline-color: #ffe3e0;
 }
 
-
 .editWidgetOptions {
   position: absolute;
   // top: 50%;
@@ -796,4 +786,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}