app/src/components/ui/componets/DraggableWidget.tsx

@@ -326,7 +326,7 @@ export const DraggableWidget = ({
             ? `calc(${canvasDimensions.width * 0.16}px - 2px)` // For top/bottom panels, set width
             : undefined, // Don't set width if it's left or right
           height: ["left", "right"].includes(widget.panel)
-            ? `calc(${canvasDimensions.height * 0.3}px - 2px)` // For left/right panels, set height
+            ? `calc(${canvasDimensions.height * 0.25}px - 2px)` // For left/right panels, set height
             : undefined, // Don't set height if it's top or bottom
         }}
         ref={chartWidget}

app/src/components/ui/componets/Panel.tsx

@@ -116,7 +116,7 @@ const Panel: React.FC<PanelProps> = ({
       resizeObserver.unobserve(canvas);
     };
   }, []);
-  
+
   const getPanelStyle = useMemo(
     () => (side: Side) => {
       const currentIndex = selectedZone.panelOrder.indexOf(side);
@@ -125,18 +125,19 @@ const Panel: React.FC<PanelProps> = ({
       const rightActive = previousPanels.includes("right");
       const topActive = previousPanels.includes("top");
       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
-  
+
       switch (side) {
         case "top":
         case "bottom":
           return {
-            minWidth: "200px", // Minimum width constraint
+            // minWidth: "200px", // Minimum width constraint
             width: `calc(100% - ${
-              (leftActive ? panelSizeWidth : 0) + (rightActive ? panelSizeWidth : 0)
+              (leftActive ? panelSizeWidth : 0) +
+              (rightActive ? panelSizeWidth : 0)
             }px)`,
             minHeight: "200px", // Minimum height constraint
             height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin
@@ -144,21 +145,22 @@ const Panel: React.FC<PanelProps> = ({
             right: rightActive ? `${panelSizeWidth}px` : "0",
             [side]: "0",
           };
-  
+
         case "left":
         case "right":
           return {
             minWidth: "200px", // Minimum width constraint
             width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin
-            minHeight: "200px", // Minimum height constraint
+            // minHeight: "200px", // Minimum height constraint
             height: `calc(100% - ${
-              (topActive ? panelSizeHeight : 0) + (bottomActive ? panelSizeHeight : 0)
+              (topActive ? panelSizeHeight : 0) +
+              (bottomActive ? panelSizeHeight : 0)
             }px)`,
             top: topActive ? `${panelSizeHeight}px` : "0",
             bottom: bottomActive ? `${panelSizeHeight}px` : "0",
             [side]: "0",
           };
-  
+
         default:
           return {};
       }