From 01961e5bb908f00a86370264e777913939c784c0 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Wed, 17 Jun 2026 18:49:06 +0100
Subject: [PATCH] fix(webui): tasks list panel hugs its content instead of
 overhanging

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>
---
 .../frontend/components/tasks/css/tasks.css   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/containers/libreportal/frontend/components/tasks/css/tasks.css b/containers/libreportal/frontend/components/tasks/css/tasks.css
index 3f918c9..a92ebc4 100644
--- a/containers/libreportal/frontend/components/tasks/css/tasks.css
+++ b/containers/libreportal/frontend/components/tasks/css/tasks.css
@@ -196,10 +196,12 @@
   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 {
   flex: 1;
-  overflow: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
@@ -207,10 +209,9 @@
 /* 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
    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 {
-  flex: 1;
-  overflow-y: auto;
   padding: 16px;
   margin: 16px;
   background: rgba(var(--bg-rgb), 0.2);
@@ -218,20 +219,20 @@
 }
 
 /* Hide scrollbar when not needed, show only when scrolling */
-.tasks-list::-webkit-scrollbar {
+.tasks-terminal::-webkit-scrollbar {
   width: 8px;
 }
 
-.tasks-list::-webkit-scrollbar-track {
+.tasks-terminal::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.tasks-list::-webkit-scrollbar-thumb {
+.tasks-terminal::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 4px;
 }
 
-.tasks-list::-webkit-scrollbar-thumb:hover {
+.tasks-terminal::-webkit-scrollbar-thumb:hover {
   background: var(--border-strong);
 }