From 6134590bd8d4c6a6e81ed323d4c7a1f78df18f08 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Fri, 25 Sep 2026 14:29:31 +0200
Subject: [PATCH] Keep the JSON full view still while its tree is opened and
 closed

Sized to its content and centred on the page, the modal grew and shrank
with every node opened or closed, its top edge jumping each time. Showing
a JSON tree it now has a fixed height, and only its content scrolls.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../task-execution-viewer/task-execution-viewer.css       | 8 ++++++++
 .../task-execution-viewer/task-execution-viewer.html      | 6 ++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/task-execution-viewer/task-execution-viewer.css b/src/app/shared/task-execution-viewer/task-execution-viewer.css
index 4965fef..df24a5d 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.css
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.css
@@ -968,3 +968,11 @@
   background: #f8fafc;
   padding: 6px 8px;
 }
+
+/*
+ * A tree grows and shrinks as its nodes are opened and closed. Sized to its content, the modal -
+ * centred on the page - would jump with every click; at a fixed height only its content scrolls.
+ */
+.execution-json-modal {
+  height: 90vh;
+}
diff --git a/src/app/shared/task-execution-viewer/task-execution-viewer.html b/src/app/shared/task-execution-viewer/task-execution-viewer.html
index b816c8f..c1bf5b1 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.html
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.html
@@ -653,7 +653,8 @@
   @if (outputPreviewModal(); as outputModal) {
   <div class="fixed inset-0 z-9999 flex items-center justify-center p-4">
     <div class="absolute inset-0 bg-black/45" (click)="closeOutputPreview($event)"></div>
-    <div class="relative z-10 flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
+    <div class="relative z-10 flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl"
+      [class.execution-json-modal]="outputModal.json">
       <div class="flex items-start justify-between gap-4 border-b border-slate-200 px-5 py-4">
         <div class="min-w-0">
           <h3 class="text-lg font-semibold text-slate-900">{{ outputPreviewTitle(outputModal) }}</h3>
@@ -674,7 +675,8 @@
   @if (intermediateInputPreviewModal(); as inputModal) {
   <div class="fixed inset-0 z-9999 flex items-center justify-center p-4">
     <div class="absolute inset-0 bg-black/45" (click)="closeIntermediateInputPreview($event)"></div>
-    <div class="relative z-10 flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
+    <div class="relative z-10 flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl"
+      [class.execution-json-modal]="inputModal.json">
       <div class="flex items-start justify-between gap-4 border-b border-slate-200 px-5 py-4">
         <div class="min-w-0">
           <h3 class="text-lg font-semibold text-slate-900">{{ intermediateInputPreviewTitle(inputModal) }}</h3>