Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): tasks list panel hugs its content instead of overhanging

Browse Source 
The recessed task-list box had flex:1, so its background filled the full
height and ran well past the last task. Move the scroll onto .tasks-terminal
and let .tasks-list size to its content, so the box ends at the last task
(and still scrolls when the list overflows). Scrollbar styling follows to
the new scroll container.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-17 18:49:06 +01:00
parent 2cf4ce1495
commit 01961e5bb9
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
containers/libreportal/frontend/components/tasks/css/tasks.css
View File

@ -196,10 +196,12 @@
color: var(--status-danger); color: var(--status-danger);
} }
/* Tasks Terminal */ /* Tasks Terminal — the scroll viewport. It fills the remaining height and
scrolls when the list overflows, so the panel inside can hug its content
instead of stretching to the bottom of the page. */
.tasks-terminal { .tasks-terminal {
flex: 1; flex: 1;
overflow: hidden; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -207,10 +209,9 @@
/* Recessed dark panel holding the task list — same recipe as the fleet /* Recessed dark panel holding the task list — same recipe as the fleet
Overview's .ov-tab-body / the per-app .tasks-container, so the list reads Overview's .ov-tab-body / the per-app .tasks-container, so the list reads
as a contained box under the status-bar strip rather than floating on the as a contained box under the status-bar strip rather than floating on the
page gradient. */ page gradient. Sizes to its content (no flex-grow) so the box ends at the
last task rather than overhanging past it. */
.tasks-list { .tasks-list {
flex: 1;
overflow-y: auto;
padding: 16px; padding: 16px;
margin: 16px; margin: 16px;
background: rgba(var(--bg-rgb), 0.2); background: rgba(var(--bg-rgb), 0.2);
@ -218,20 +219,20 @@
} }
/* Hide scrollbar when not needed, show only when scrolling */ /* Hide scrollbar when not needed, show only when scrolling */
.tasks-list::-webkit-scrollbar { .tasks-terminal::-webkit-scrollbar {
width: 8px; width: 8px;
} }
.tasks-list::-webkit-scrollbar-track { .tasks-terminal::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
.tasks-list::-webkit-scrollbar-thumb { .tasks-terminal::-webkit-scrollbar-thumb {
background: var(--border); background: var(--border);
border-radius: 4px; border-radius: 4px;
} }
.tasks-list::-webkit-scrollbar-thumb:hover { .tasks-terminal::-webkit-scrollbar-thumb:hover {
background: var(--border-strong); background: var(--border-strong);
} }