From 4c973b39225697a790afeada41caffbfb2755064 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Thu, 3 Sep 2026 10:55:05 +0200
Subject: [PATCH] Make the blocks and containers palettes scroll again

Rewriting those two stylesheets from scratch dropped the :host rule they had, so
the host had no height for .blocks-list-items to be constrained by. Its
overflow-y never engaged and the palette simply ran off the bottom of the sidebar
once there were more entries than fitted. Restored, with a note saying what it is
load-bearing for.

Two related sizing fixes while here. The flows list capped itself at
calc(100vh - 380px), a number tuned for the tall header that the collapsible
filter panel replaced; height now comes from the flex column, which cannot go
stale the next time the header changes. And the executions history was missing
min-height: 0, so its flex item refused to shrink below its content and never
scrolled either.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/app/shared/blocks-list/blocks-list.css       | 16 +++++++++++++++-
 .../shared/containers-list/containers-list.css   | 16 +++++++++++++++-
 src/app/shared/flows-list/flows-list.css         | 12 +++++-------
 .../tasks-executions-list.css                    |  2 ++
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/blocks-list/blocks-list.css b/src/app/shared/blocks-list/blocks-list.css
index 0cc7158..4c23232 100644
--- a/src/app/shared/blocks-list/blocks-list.css
+++ b/src/app/shared/blocks-list/blocks-list.css
@@ -2,10 +2,24 @@
  * Palette lives here rather than in the markup so the blocks and containers lists, which share
  * these class names, stay identical apart from their accent.
  */
+/*
+ * Without this the host has no height to constrain, so .blocks-list-items grows past the viewport
+ * and its overflow-y never engages: the palette simply runs off the bottom of the sidebar.
+ */
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
 .blocks-list-root {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  height: 100%;
+  width: 100%;
+  min-width: 0;
   min-height: 0;
 }
 
diff --git a/src/app/shared/containers-list/containers-list.css b/src/app/shared/containers-list/containers-list.css
index 0cc7158..4c23232 100644
--- a/src/app/shared/containers-list/containers-list.css
+++ b/src/app/shared/containers-list/containers-list.css
@@ -2,10 +2,24 @@
  * Palette lives here rather than in the markup so the blocks and containers lists, which share
  * these class names, stay identical apart from their accent.
  */
+/*
+ * Without this the host has no height to constrain, so .blocks-list-items grows past the viewport
+ * and its overflow-y never engages: the palette simply runs off the bottom of the sidebar.
+ */
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
 .blocks-list-root {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  height: 100%;
+  width: 100%;
+  min-width: 0;
   min-height: 0;
 }
 
diff --git a/src/app/shared/flows-list/flows-list.css b/src/app/shared/flows-list/flows-list.css
index 5d551ae..481aa63 100644
--- a/src/app/shared/flows-list/flows-list.css
+++ b/src/app/shared/flows-list/flows-list.css
@@ -47,11 +47,14 @@
   text-align: center;
 }
 
+/*
+ * Height comes from the flex column, not a hardcoded calc: that 380px was tuned for the old tall
+ * header and now just wastes space, and it would go stale again on the next header change.
+ */
 .flows-list-items {
   flex: 1;
   width: 100%;
   min-height: 0;
-  max-height: calc(100vh - 380px);
   overflow-y: auto;
   box-sizing: border-box;
   padding: 10px 0 20px !important;
@@ -76,15 +79,10 @@
   min-width: 0;
 }
 
-/*
- * The grouped container relies on the flex column for its height instead of the flat list's fixed
- * max-height calc, which does not account for the project filter row above it.
- */
 .flows-list-groups {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  max-height: none;
+  gap: 6px;
   padding: 10px 0 20px;
 }
 
diff --git a/src/app/shared/tasks-executions-list/tasks-executions-list.css b/src/app/shared/tasks-executions-list/tasks-executions-list.css
index b1e5eb3..f76846a 100644
--- a/src/app/shared/tasks-executions-list/tasks-executions-list.css
+++ b/src/app/shared/tasks-executions-list/tasks-executions-list.css
@@ -36,6 +36,8 @@
 
 .tasks-list-items {
   flex: 1;
+  /* Without min-height a flex item refuses to shrink below its content, so it never scrolls. */
+  min-height: 0;
   overflow-y: auto;
   padding: 10px 8px;
 }