From 3bebacbde7f9fe3660abec8284abe1154a3c7144 Mon Sep 17 00:00:00 2001
From: ziyitan <ziyitan@tencent.com>
Date: Wed, 15 Apr 2026 16:34:25 +0800
Subject: [PATCH] fix: constrain exec approval modal overflow on desktop

When the exec approval command payload is very long (e.g. a large
serialized JSON allowlist), the modal content overflows the card,
pushing buttons out of the viewport and breaking the layout.

Apply the same scroll-containment and wrapping fixes that the mobile
media query already uses to the desktop baseline:

- cap card height at 100dvh - 48px and make it a flex column
- cap command block at min(40dvh, 320px) with overflow: auto
- add overflow-wrap: anywhere to command block and meta values
- pin the header with flex-shrink: 0

Closes #53368.
---
 ui/src/styles/components.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 0aed9df44f8..ac2012526aa 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -2990,10 +2990,14 @@ td.data-table-key-col {
 
 .exec-approval-card {
   width: min(540px, 100%);
+  max-height: calc(100dvh - 48px);
+  display: flex;
+  flex-direction: column;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 20px;
+  overflow: hidden;
   animation: scale-in 0.2s var(--ease-out);
 }
 
@@ -3002,6 +3006,7 @@ td.data-table-key-col {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
+  flex-shrink: 0;
 }
 
 .exec-approval-title {
@@ -3026,14 +3031,19 @@ td.data-table-key-col {
 
 .exec-approval-command {
   margin-top: 12px;
+  max-width: 100%;
+  max-height: min(40dvh, 320px);
   padding: 10px 12px;
   background: var(--secondary);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
+  overflow: auto;
   word-break: break-word;
+  overflow-wrap: anywhere;
   white-space: pre-wrap;
   font-family: var(--mono);
   font-size: 13px;
+  line-height: 1.45;
 }
 
 .exec-approval-meta {
@@ -3051,8 +3061,11 @@ td.data-table-key-col {
 }
 
 .exec-approval-meta-row span:last-child {
+  min-width: 0;
   color: var(--text);
   font-family: var(--mono);
+  text-align: right;
+  overflow-wrap: anywhere;
 }
 
 .exec-approval-error {