From 6df022900b8a0e1842ee08a3f43cf88f4928cb0b Mon Sep 17 00:00:00 2001
From: Alessandro Pogliaghi <apogliaghi@gmail.com>
Date: Tue, 14 Jul 2026 11:40:02 +0100
Subject: [PATCH] fix(permissions): cap permission prompt height and scroll
 long content

A very long permission request (e.g. a large shell command or MCP tool input) could grow the approval card taller than the viewport, pushing the Allow/Deny buttons off-screen with no way to scroll to them.

Cap the ActionSelector card at 80vh and make the pending-action/question region scroll internally, keeping the action buttons pinned and always reachable.

Generated-By: PostHog Code
Task-Id: 2f1e1451-9626-40b3-80b7-478fe8a43dc8
---
 .../action-selector/ActionSelector.tsx        | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/primitives/action-selector/ActionSelector.tsx b/packages/ui/src/primitives/action-selector/ActionSelector.tsx
index 49699617f3..19e8576f96 100644
--- a/packages/ui/src/primitives/action-selector/ActionSelector.tsx
+++ b/packages/ui/src/primitives/action-selector/ActionSelector.tsx
@@ -227,9 +227,9 @@ export function ActionSelector({
       style={{
         outline: "none",
       }}
-      className="rounded-(--radius-3) border border-(--gray-6) bg-(--gray-1)"
+      className="flex max-h-[80vh] flex-col rounded-(--radius-3) border border-(--gray-6) bg-(--gray-1)"
     >
-      <Flex direction="column" gap="2">
+      <Flex direction="column" gap="2" className="min-h-0 flex-1">
         {hasSteps && steps && (
           <StepTabs
             steps={steps}
@@ -253,13 +253,20 @@ export function ActionSelector({
             </Text>
           ))}
 
-        {pendingAction && <Box>{pendingAction}</Box>}
+        {(pendingAction || question) && (
+          <Box className="min-h-0 flex-1 overflow-y-auto">
+            {pendingAction && (
+              <Box mb={question ? "2" : "0"}>{pendingAction}</Box>
+            )}
+            {question && (
+              <Text as="p" className="text-[13px]">
+                {question}
+              </Text>
+            )}
+          </Box>
+        )}
 
         <Box>
-          <Text mb="2" as="p" className="text-[13px]">
-            {question}
-          </Text>
-
           <Flex direction="column" gap="1" px="2">
             {allOptions.map((option, index) => {
               if (isSubmitOption(option.id) || isCancelOption(option.id)) {