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

@@ -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;
 }
 
 /* ===========================================

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"