Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Adjust panel size calculations and clean up realTimeViz styles

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-04-07 18:37:17 +05:30
parent 1852a47775
commit bde1e6318c
2 changed files with 13 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/components/ui/componets/Panel.tsx
View File

@@ -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()}