#14201: UI: fix exec approval dialog scrolling with long commands
docs
app: web-ui
gateway
scripts
docker
stale
Cluster:
UI Overlap Fixes
## Summary
Fixed exec approval dialog to make content scrollable when commands are too long to fit on screen.
Previously, when an exec approval request contained a long command (like a Python script), the content would extend beyond the viewport and push the action buttons (Allow Once, Always Allow, Deny) off-screen, making it impossible to approve or deny the request.
## Changes
- Wrapped command and metadata content in a new scrollable `.exec-approval-content` div
- Added `max-height: calc(100vh - 48px)` constraint to the approval card
- Implemented flexbox layout to keep header and action buttons fixed while content scrolls
- Added appropriate overflow handling with subtle padding adjustments
## UI Behavior
- ✅ Header with "Exec approval needed" stays fixed at top
- ✅ Command and metadata content scrolls in the middle section
- ✅ Action buttons (Allow Once, Always Allow, Deny) always visible at bottom
- ✅ Works on all viewport sizes
## Test Plan
- [x] Build succeeds (`pnpm build`)
- [x] Type-check, linting, and formatting pass (`pnpm check`)
- [x] Tested with long Python script that previously pushed buttons off-screen
- [x] Verified buttons now always visible with content scrolling properly
- [x] Tested on various viewport heights to ensure responsiveness
## Related Issue
This fixes a critical UX issue where users with long exec approval requests couldn't interact with the approval prompt.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
Fixed critical UX issue where long commands in exec approval dialogs pushed action buttons off-screen. The dialog now uses a flexbox layout with a scrollable content area, ensuring the header and action buttons remain visible and accessible regardless of command length.
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk
- The changes are well-contained to UI styling and layout with proper flexbox implementation. The fix is straightforward, uses standard CSS patterns, and addresses a legitimate UX bug without introducing any logic changes or potential side effects.
- No files require special attention
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
Most Similar PRs
#20064: UI: fix form overlapping subtitle in config screen
by powerdot · 2026-02-18
75.7%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
75.1%
#21940: style(layout): change content display to flex
by homfarnam · 2026-02-20
74.4%
#13838: UI: fix config panel CI failures and modularize rendering
by fresed05 · 2026-02-11
73.7%
#14127: fix(exec): return command output when gateway approval is Always Allow
by Siziff · 2026-02-11
73.6%
#22095: feat: add Telegram inline buttons to exec approval requests
by AIflow-Labs · 2026-02-20
73.3%
#20435: fix(exec): prioritize user 'always allow' config over tool defaults...
by ChisomUma · 2026-02-18
73.3%
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
73.0%
#15215: fix(UI): Prevent config layout panel from overlapping description text
by Chityalaakhil · 2026-02-13
73.0%
#9411: Fix: Web UI long message overflow causing unreadable text
by vishaltandale00 · 2026-02-05
72.3%