# CMS Editor Height Fix Design

## Problem

The Puck CMS editor becomes unusable when pages contain tall content (e.g., a single large image component):

1. **Users cannot scroll the preview** to see content below the viewport
2. **Users cannot add new components** because the bottom drop zone is unreachable
3. **The Outline panel** in the left sidebar gets cut off as component list grows

### Root Cause

Nested `overflow: hidden` declarations prevent scrolling at multiple levels:
- The outer editor container has `overflow: hidden`
- The iframe body has `overflow: hidden`
- The preview `<main>` element has `overflow: hidden`

This was an attempted fix for a previous issue where 4+ scrollbars appeared simultaneously.

## Solution

Establish **independent scroll containers** for each region using proper flexbox patterns:

```
┌─────────────────────────────────────────────────────────┐
│ Top Bar (flex-shrink: 0)                                │
├─────────────────────────────────────────────────────────┤
│ Editor container (flex: 1, min-height: 0)               │
│  ┌──────────┬────────────────────────┬──────────┐      │
│  │ Left     │ Preview Canvas         │ Right    │      │
│  │ Sidebar  │ ┌────────────────────┐ │ Sidebar  │      │
│  │ (Puck    │ │ Header (shrink: 0) │ │ (Puck    │      │
│  │ managed) │ │ Main (overflow:    │ │ managed) │      │
│  │          │ │      auto)         │ │          │      │
│  │          │ │ Footer (shrink: 0) │ │          │      │
│  │          │ └────────────────────┘ │          │      │
│  └──────────┴────────────────────────┴──────────┘      │
└─────────────────────────────────────────────────────────┘
```

### Key Principles

1. **`min-height: 0`** on flex containers allows children to shrink below content size
2. **Single scroll per region** - only the preview main area scrolls, not nested containers
3. **Header/footer stay fixed** in the preview while main content scrolls

## Implementation

All changes are in `app/dashboard/cms/pages/[id]/edit/page.tsx`:

### Change 1: Outer container (~line 438)
Add `minHeight: 0` to allow flex shrinking:
```tsx
<div style={{
  height: 'calc(100vh - 80px)',
  display: 'flex',
  flexDirection: 'column',
  minHeight: 0
}}>
```

### Change 2: Editor wrapper (~line 858)
Add `minHeight: 0`:
```tsx
<div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
```

### Change 3: iframe override (~lines 893-901)
Remove `overflow: hidden` from iframe body:
```tsx
// Before
iframeDoc.body.style.cssText = '...overflow: hidden;';
// After
iframeDoc.body.style.cssText = '...'; // no overflow restriction
```

### Change 4: Preview main area (~lines 1013-1021)
Change `overflow: hidden` to `overflow: auto`:
```tsx
<main style={{ flex: 1, padding: '0 12px', background: '#fff', overflow: 'auto', minHeight: 0 }}>
```

## Testing

1. Create a page with a single tall image component (1000px+ height)
2. Verify the preview scrolls to show the entire image
3. Verify the bottom drop zone is accessible for adding new components
4. Verify header/footer remain visible while scrolling main content
5. Verify no multiple scrollbars appear (single scroll per region)
6. Verify the Outline panel in left sidebar scrolls independently if needed

## Risks

- **Puck's internal scroll handling** may conflict - monitor for drag-drop issues during scroll
- **Auto-scroll during drag** should still work (Puck handles this internally)