diff --git a/app/src/components/SimulationDashboard/DashboardEditor.tsx b/app/src/components/SimulationDashboard/DashboardEditor.tsx
index ccf732a..0bd4efb 100644
--- a/app/src/components/SimulationDashboard/DashboardEditor.tsx
+++ b/app/src/components/SimulationDashboard/DashboardEditor.tsx
@@ -288,9 +288,28 @@ const DashboardEditor: React.FC = () => {
                         const newWidth = Math.max(100, resizeStart.width + deltaX);
                         const newHeight = Math.max(50, resizeStart.height + deltaY);
 
-                        // Direct DOM manipulation
-                        elementToResize.style.width = `${newWidth}px`;
-                        elementToResize.style.height = `${newHeight}px`;
+                        // Constrain element to block bounds
+                        const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
+                        if (blockElement) {
+                            const blockRect = blockElement.getBoundingClientRect();
+                            const elementLeft = elementToResize.offsetLeft;
+                            const elementTop = elementToResize.offsetTop;
+
+                            // Calculate max allowed dimensions (block size - element position - padding)
+                            const maxAllowedWidth = blockRect.width - elementLeft - 20;
+                            const maxAllowedHeight = blockRect.height - elementTop - 20;
+
+                            const constrainedWidth = Math.min(newWidth, maxAllowedWidth);
+                            const constrainedHeight = Math.min(newHeight, maxAllowedHeight);
+
+                            // Direct DOM manipulation
+                            elementToResize.style.width = `${constrainedWidth}px`;
+                            elementToResize.style.height = `${constrainedHeight}px`;
+                        } else {
+                            // Fallback if block not found (unlikely)
+                            elementToResize.style.width = `${newWidth}px`;
+                            elementToResize.style.height = `${newHeight}px`;
+                        }
                     }
                 } else if (resizingBlock) {
                     const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement;
@@ -345,12 +364,14 @@ const DashboardEditor: React.FC = () => {
             } else if (resizingElement && selectedBlock) {
                 // Update backend for element resize
                 const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement;
-                if (elementToResize) {
+                const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
+
+                if (elementToResize && blockElement) {
                     const computedStyle = window.getComputedStyle(elementToResize);
                     const width = parseFloat(computedStyle.width);
                     const height = parseFloat(computedStyle.height);
 
-                    // Use peek to get updated blocks and send only the affected block to backend
+                    // Use peek to get updated blocks
                     const updatedBlocks = peekUpdateElementSize(selectedBlock, resizingElement, { width, height });
                     blockToUpdate = getBlockFromPeekedBlocks(updatedBlocks, selectedBlock);
                 }