Skip to content

Modal UI/UX broken across ALL modals: content bleed-through + action-row truncation/overflow (shared modal renderer) #3732

Description

@Hmbown

Summary

The confirmation/approval modal UI/UX is broken on 0.8.66. Observed on the Plan Confirmation popup but it affects the modal layer generally.

Problems (see screenshots)

  1. Content bleed / no opaque backdrop. The modal does not fully mask the conversation behind it — background text shows through / around the modal, making both unreadable.
  2. Action row truncated. The choices line runs off the right edge:
    [1/128 PgUp/Dn · Ctrl+U/D] [1/a] Accept [2/y] YOLO [3… ← option 3 (and beyond) is cut off and unreachable/undiscoverable.
  3. Cramped layout. Title/Objective/body are tightly packed against the border with little padding; long titles wrap awkwardly.
  4. Width not responsive. The modal doesn't size/wrap to the terminal width, so the footer actions overflow instead of wrapping to a second line.

Repro

  • Enter Plan mode, let the model produce a plan → the Plan Confirmation modal appears with the bleed + truncated-actions problems.

Expected

  • Opaque modal surface that fully covers the area behind it.
  • Action/footer row wraps (or the modal widens) so every choice (Accept, YOLO, Revise, Return, etc.) is always visible and reachable.
  • Consistent inner padding; responsive width with graceful wrapping.

Environment

  • codewhale 0.8.66, TUI, deepseek-v4-pro
  • Surface: modal/overlay layer (Plan Confirmation; likely shared modal renderer)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtuiTerminal UI behavior, rendering, or interactionuxUser experience, interaction, or presentation polish

    Projects

    Status
    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions