PDD-CLI Bug: Generates Dialogs Without Overflow Handling for Variable Content

## PDD-CLI Bug: Generates Dialogs Without Overflow Handling for Variable Content

PDD-CLI generates dialog/modal components without considering overflow scenarios when content is longer than viewport. Dialogs with long content become unusable because content is cut off without scrolling.

**Why this matters:** Users can't see full dialog content or reach action buttons when content overflows.

## Concrete Example

For a message preview dialog:

```typescript
// PDD generated (INCOMPLETE):
export function PreviewDialog({ message }: Props) {
  return (
    <Dialog>
      <DialogContent>
        <DialogTitle>Message Preview</DialogTitle>
        <div>
          {message}  {/* Could be very long! */}
        </div>
        <DialogActions>
          <Button>Close</Button>
        </DialogActions>
      </DialogContent>
    </Dialog>
  );
}
```

**What went wrong:** PDD didn't add overflow handling. When `message` is longer than viewport, content is cut off and "Close" button is inaccessible.

**Impact:** Users can't scroll to see full message or reach close button in dialogs with long content.

## Why PDD Makes This Mistake

PDD-CLI currently:
- Generates UI for "happy path" (short content)
- Doesn't consider edge cases (very long content)
- Doesn't add overflow/scroll handling

But it should:
1. Add `max-height` and `overflow-y: auto` to variable content containers
2. Keep headers/footers fixed, make body scrollable
3. Test with long content scenarios

## How to Prevent This in PDD-CLI

**What PDD should do differently:**

1. **Add overflow handling to dialogs:**
   ```typescript
   export function PreviewDialog({ message }: Props) {
     return (
       <Dialog>
         <DialogContent>
           <DialogTitle>Message Preview</DialogTitle>
           {/* Scrollable body with max-height */}
           <div className="max-h-[70vh] overflow-y-auto">
             {message}
           </div>
           <DialogActions>
             <Button>Close</Button>
           </DialogActions>
         </DialogContent>
       </Dialog>
     );
   }
   ```

2. **Identify variable-length content:** Recognize text fields, lists, descriptions that could be long.

3. **Generate responsive layouts:** Consider different viewport sizes.

**Example improvement:**
```
Current: Generate dialog with content div
       → No overflow handling
       → Long content breaks layout

Improved: Generate dialog with scrollable content
        → Add max-h-[70vh] overflow-y-auto
        → Keep actions visible
        → Works with any content length
```

## Severity

**P3 - Low Priority**

- **Frequency:** Low - only affects dialogs with variable content
- **Impact:** Medium - UX issue, content inaccessible
- **Detectability:** Medium - obvious with long content
- **Prevention cost:** Low - add CSS classes

## Category

`incomplete-implementation`

## Related Issues

- #432 - Data models without extraction logic (different incompleteness)
- #435 - Incomplete metric calculations (similar partial implementation)

---

**For Contributors:** Discovered in message preview dialog where long messages made dialog unusable, overflow handling added in commit `34a651d5`.


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PDD-CLI Bug: Generates Dialogs Without Overflow Handling for Variable Content #587