🔨 TASK-009: Fix Layout Resize Issues

[ajacobm]

Task: Fix Layout Resize Issues

Description: Fix the layout resize issues where the main panel doesn't resize correctly and the right panel sometimes disappears.

Technical Details:

• Convert layout to CSS Grid with minmax constraints
• Add ResizeObserver with window resize fallback
• Set minimum widths for panels
• Handle responsive breakpoints
• Test at various viewport sizes

Files to Modify:

frontend/src/App.tsx              (modify - layout structure)
frontend/src/index.css            (modify - add grid layout)

Solution Approach:

/* CSS Grid with minmax constraints */
.layout-container {
  display: grid;
  grid-template-columns: 
    minmax(200px, 256px)    /* Navigator panel */
    minmax(400px, 1fr)      /* Main canvas */
    minmax(280px, 320px);   /* Details panel */
  height: 100%;
}

/* Fallback for very small screens */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
  }
}

Acceptance Criteria:

• Center panel resizes correctly on window resize
• Right panel never disappears
• Minimum widths prevent layout breaking
• Works on common screen sizes (1024, 1280, 1920)

Effort: M (Medium - 4-8 hours)

Parent Story: #34
Parent Epic: #27

Branch: task/integration/layout-fix