From 5389f26d516a3dedf301f0d55e25ff2c8fc84f7b Mon Sep 17 00:00:00 2001
From: John Schneider <a0017343@securustechnologies.com>
Date: Wed, 11 Feb 2026 12:22:55 -0500
Subject: [PATCH] UI: fix exec approval dialog scrolling with long commands

Make exec approval content scrollable when commands are too long to fit
on screen. Previously, long commands (like Python scripts) would push
the action buttons off-screen, making it impossible to approve/deny.

Changes:
- Wrap command/meta content in scrollable `.exec-approval-content` div
- Add max-height constraint to card (viewport - padding)
- Use flexbox layout to keep header and buttons always visible
- Content area scrolls independently in the middle

Fixes issue where users couldn't see approval buttons for long exec requests.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 ui/src/styles/components.css     | 14 ++++++++++++++
 ui/src/ui/views/exec-approval.ts | 30 ++++++++++++++++--------------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 126972ca003..7efa531ef3a 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -2146,11 +2146,14 @@
 
 .exec-approval-card {
   width: min(540px, 100%);
+  max-height: calc(100vh - 48px);
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 20px;
   animation: scale-in 0.2s var(--ease-out);
+  display: flex;
+  flex-direction: column;
 }
 
 .exec-approval-header {
@@ -2158,6 +2161,16 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
+  flex-shrink: 0;
+}
+
+.exec-approval-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1 1 auto;
+  min-height: 0;
+  margin-right: -4px;
+  padding-right: 4px;
 }
 
 .exec-approval-title {
@@ -2222,6 +2235,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 /* ===========================================
diff --git a/ui/src/ui/views/exec-approval.ts b/ui/src/ui/views/exec-approval.ts
index f1f549fc354..6e9e3bf7c44 100644
--- a/ui/src/ui/views/exec-approval.ts
+++ b/ui/src/ui/views/exec-approval.ts
@@ -45,21 +45,23 @@ export function renderExecApprovalPrompt(state: AppViewState) {
               : nothing
           }
         </div>
-        <div class="exec-approval-command mono">${request.command}</div>
-        <div class="exec-approval-meta">
-          ${renderMetaRow("Host", request.host)}
-          ${renderMetaRow("Agent", request.agentId)}
-          ${renderMetaRow("Session", request.sessionKey)}
-          ${renderMetaRow("CWD", request.cwd)}
-          ${renderMetaRow("Resolved", request.resolvedPath)}
-          ${renderMetaRow("Security", request.security)}
-          ${renderMetaRow("Ask", request.ask)}
+        <div class="exec-approval-content">
+          <div class="exec-approval-command mono">${request.command}</div>
+          <div class="exec-approval-meta">
+            ${renderMetaRow("Host", request.host)}
+            ${renderMetaRow("Agent", request.agentId)}
+            ${renderMetaRow("Session", request.sessionKey)}
+            ${renderMetaRow("CWD", request.cwd)}
+            ${renderMetaRow("Resolved", request.resolvedPath)}
+            ${renderMetaRow("Security", request.security)}
+            ${renderMetaRow("Ask", request.ask)}
+          </div>
+          ${
+            state.execApprovalError
+              ? html`<div class="exec-approval-error">${state.execApprovalError}</div>`
+              : nothing
+          }
         </div>
-        ${
-          state.execApprovalError
-            ? html`<div class="exec-approval-error">${state.execApprovalError}</div>`
-            : nothing
-        }
         <div class="exec-approval-actions">
           <button
             class="btn primary"