Constrain grid child element sizes to cell boundaries during resize

[Copilot]

Grid child elements could previously be resized beyond their grid cell boundaries, causing layout overlap and breaking the visual grid structure. This PR implements proper size constraints that limit child elements to their allocated grid cell dimensions during resize operations.

Changes Made

LayoutDesignerService Enhancements

• Added getGridChildMaxDimensions() method to calculate maximum allowed dimensions for grid child elements based on their cell position, span, and the parent grid's sizing configuration
• Added calculateGridSizes() helper method to compute actual grid column/row sizes supporting Star (*), Absolute (px), and Auto sizing types
• Handles complex scenarios including multi-cell spans and mixed sizing definitions

DesignerCanvasComponent Resize Logic

• Enhanced onMouseMove() resize handler to detect when an element being resized is a child of a Grid layout
• Applies grid cell boundary constraints in addition to existing minimum size constraints
• Maintains backward compatibility - constraints only apply to grid children, other layouts remain unchanged

Technical Details

The implementation works by:

1. Detecting when a resize operation targets a grid child element (element.parent?.type === ElementType.Grid)
2. Calculating the actual pixel dimensions of the grid cell(s) the element occupies
3. Constraining the new width/height to not exceed these calculated maximums
4. Preserving existing minimum size constraints and resize handle functionality

Before/After Comparison

Before: Grid child elements could exceed cell boundaries, overlapping adjacent cells

After: Elements are properly constrained within their grid cell boundaries

The grid visualization clearly shows the cell boundaries with dashed lines, and the red label element is now properly contained within its assigned cell.

Fixes #80.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: ng build (dns block)
• www.google-analytics.com
  • Triggering command: ng build (dns block)
  • Triggering command: ng serve --host 0.0.0.0 --port 4200 (dns block)
  • Triggering command: ng test --watch=false --browsers=ChromeHeadless (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.