lelii
/
humainflow-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Lucio Lelii 2026-09-25 14:29:31 +02:00
parent 3ffaf6e596
commit 6134590bd8
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/shared/task-execution-viewer/task-execution-viewer.css
View File

@ -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;
}

6
src/app/shared/task-execution-viewer/task-execution-viewer.html
View File

@ -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>