From 9903d6351ac0277d066a8d348ba82e5ab96a7318 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Wed, 9 Apr 2025 09:42:49 +0530
Subject: [PATCH] fixed display zones dispay cetner

---
 app/src/components/ui/componets/DraggableWidget.tsx       | 3 +++
 .../components/ui/componets/DroppedFloatingWidgets.tsx    | 1 -
 app/src/components/ui/componets/Panel.tsx                 | 6 ++++--
 app/src/styles/pages/realTimeViz.scss                     | 8 ++++----
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index cfd002d..e37ce30 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -398,3 +398,6 @@ export const DraggableWidget = ({
 };
 
 
+
+
+// by using canvasDimensions.height canvasDimensions.width dynamically div value insted of static 6 and 4 calculate according to canvasDimensions.width canvasDimensions.height
\ No newline at end of file
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index bd707f4..9c0b8da 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -510,7 +510,6 @@ const DroppedObjects: React.FC = () => {
 
   const widthMultiplier = parseFloat(containerWidth) * 0.13;
 
-  console.log("zone.objects: ", zone.objects);
   return (
     <div
       onPointerMove={handlePointerMove}
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index fe9836d..f9a598f 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;
 
@@ -255,13 +255,15 @@ const Panel: React.FC<PanelProps> = ({
   const leftCapacity = calculatePanelCapacity("left");
   const rightCapacity = calculatePanelCapacity("right");
 
+  console.log('topCapacity: ', topCapacity);
+  console.log('bottomWidth: ', bottomWidth);
   return (
     <>
       <style>
         {`
           :root {
             --topWidth: ${topWidth};
-            --bottomWidth: ${bottomWidth};
+            --bottomWidth: ${bottomWidth} ;
             --leftHeight: ${leftHeight};
             --rightHeight: ${rightHeight};
 
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index cc3f791..2935391 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;
 
@@ -77,7 +77,7 @@
     overflow: auto;
     max-width: calc(100% - 500px);
     z-index: 3;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -0%);
 
     &::-webkit-scrollbar {
       display: none;
@@ -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;
   }
 }