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>
This commit is contained in:
Lucio Lelii 2026-09-03 10:55:05 +02:00
parent 5476324d8c
commit 4c973b3922
4 changed files with 37 additions and 9 deletions

View File

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

View File

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

View File

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

View File

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