From 937241d28b2544178d76e13a16d4e98a2989f6a0 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 9 Apr 2025 09:31:22 +0530
Subject: [PATCH] fix: Correct bottom width and height calculations in Panel
 component and styles

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

diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index fe9836d..85c58d0 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -246,7 +246,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Calculate capacities and dimensions
   const topWidth = getPanelStyle("top").width;
-  const bottomWidth = getPanelStyle("bottom").width;
+  const bottomWidth = getPanelStyle("bottom").height;
   const leftHeight = getPanelStyle("left").height;
   const rightHeight = getPanelStyle("right").height;
 
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index 0af1201..18a0f2a 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -68,7 +68,7 @@
     display: flex;
     background-color: var(--background-color);
     position: absolute;
-    // bottom: 10px;
+    bottom: 10px;
     left: 50%;
     gap: 6px;
 
@@ -124,7 +124,7 @@
   }
 
   .zone-wrapper.bottom {
-    top: var(--bottomWidth);
+    bottom: var(--bottomWidth);
     // bottom: 200px;
   }
 
@@ -370,7 +370,7 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    top: var(--bottomWidth);
+    bottom: var(--bottomWidth);
     // bottom: 210px;
   }
 }