From 9a56377d5db1468643b324d9c04f9a00c95d4d5b Mon Sep 17 00:00:00 2001
From: kn <kristiannoergaard@gmail.com>
Date: Fri, 9 Oct 2026 17:14:02 +0200
Subject: [PATCH] (Svelte) Keep the System Logs page from scrolling the app bar
 away

The wrapper of a lone page module was not a flex container, so the logs
module's flex-1 had no effect and it grew to its full content height.
The page scrolled instead of the log, taking the app bar, log toolbar
and table header with it and breaking scroll-to-latest. The wrapper is
now a flex column, so the log stays within the page and scrolls itself.

The sidebar ScrollArea lacked min-h-0, so on short screens the menu
overflowed; clicking a low item scrolled the overflow-hidden root and
pushed the app bar off screen.
---
 Client/svelte/src/routes/+page.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/Client/svelte/src/routes/+page.svelte b/Client/svelte/src/routes/+page.svelte
index 41fa6a71..0c21e772 100644
--- a/Client/svelte/src/routes/+page.svelte
+++ b/Client/svelte/src/routes/+page.svelte
@@ -300,7 +300,7 @@
 					<Sheet.Header class="p-4 border-b">
 						<Sheet.Title>{appName}</Sheet.Title>
 					</Sheet.Header>
-					<ScrollArea class="flex-1">
+					<ScrollArea class="flex-1 min-h-0">
 						<nav class="flex flex-col">
 							{#each menuItems as item (item.uuid)}
 								{@const active = isMenuActive(item)}
@@ -384,7 +384,7 @@
 		{#if isLargeScreen && sidebarVisible}
 			<aside class="w-72 border-r border-border bg-card shrink-0 flex flex-col">
 				<div class="p-4 border-b font-semibold text-sm">{appName}</div>
-				<ScrollArea class="flex-1">
+				<ScrollArea class="flex-1 min-h-0">
 					<nav class="flex flex-col">
 						{#each menuItems as item (item.uuid)}
 							{@const active = isMenuActive(item)}
@@ -412,12 +412,14 @@
 			{#each pages as page (page.name)}
 				{#if poll.v >= 0 && app.pageIsActive(page)}
 					<!-- A lone top-level module (typically a grid) fills the page; several are
-					     stacked at their natural height and the page scrolls (issue #28). -->
+					     stacked at their natural height and the page scrolls (issue #28).
+					     The lone module's wrapper is a flex column, so a module sized with
+					     flex-1 (logs) is confined to the page and scrolls itself. -->
 					{@const modules = page.modules || []}
 					{@const fillsPage = modules.length === 1}
 					<div class="absolute inset-2 overflow-auto flex flex-col gap-2">
 						{#each modules as mod (mod.uuid)}
-							<div class={fillsPage ? 'flex-1 min-h-0' : 'shrink-0'}>
+							<div class={fillsPage ? 'flex-1 min-h-0 flex flex-col' : 'shrink-0'}>
 								<ModuleFactory module={mod} {app} />
 							</div>
 						{/each}