← Back to PRs

#14201: UI: fix exec approval dialog scrolling with long commands

by jhs129 open 2026-02-11 17:23 View on GitHub →
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