fixed display zones dispay cetner

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

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}

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};