From d734c785b9612dfd615d00cbaa789c9d59be1d7d Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Mon, 27 Oct 2025 14:56:49 +0100
Subject: [PATCH] (Stash) Log Viewer UI Nits

---
 frontend/src/lib/components/LogViewer.svelte | 149 ++++++++++---------
 1 file changed, 76 insertions(+), 73 deletions(-)

diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 8f8c7546c8611..038b53fb17bcd 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -221,86 +221,89 @@
 </Drawer>
 
 <div class="w-full h-full {wrapperClass}">
-	<div class="w-full h-full relative">
-		<div
-			bind:this={div}
-			class="w-full h-full overflow-auto bg-surface-secondary pt-4 {noMaxH ? '' : 'max-h-screen'}"
-			data-nav-id={navigationId}
-		>
-			<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-xs">
-				<div class="flex gap-2">
-					{#if jobId && download}
-						<div class="flex items-center">
-							<a
-								class="text-primary pb-0.5"
-								target="_blank"
-								href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
-								download="windmill_logs_{jobId}.txt"
-								><Download size="14" />
-							</a>
-						</div>
-					{/if}
-					<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
-					{#if !noAutoScroll}
-						<label
-							class="{small
-								? ''
-								: 'py-2'} pr-2 text-2xs flex gap-2 font-normal text-primary items-center"
-						>
-							Auto scroll
-							<input class="windmillapp" type="checkbox" bind:checked={scroll} />
-						</label>
-					{/if}
-				</div>
+	<div
+		class="w-full flex items-center text-xs bg-surface-secondary rounded-t-md border-b px-2 relative"
+	>
+		{#if isLoading}
+			<div class="flex gap-2 items-center">
+				<Loader2 class="animate-spin" />
+				{#if tag}
+					<div class="flex flex-row items-center gap-1">
+						<div class="text-primary text-2xs">{tagLabel ?? 'tag'}: {tag}</div>
+						<NoWorkerWithTagWarning {tagLabel} {tag} />
+					</div>
+				{/if}
+				{#if jobId}
+					<QueuePosition {jobId} />
+				{/if}
 			</div>
-			{#if isLoading}
-				<div class="flex gap-2 absolute top-2 left-2 items-center z-10">
-					<Loader2 class="animate-spin" />
-					{#if tag}
-						<div class="flex flex-row items-center gap-1">
-							<div class="text-primary text-2xs">{tagLabel ?? 'tag'}: {tag}</div>
-							<NoWorkerWithTagWarning {tagLabel} {tag} />
-						</div>
-					{/if}
-					{#if jobId}
-						<QueuePosition {jobId} />
-					{/if}
+		{:else if duration}
+			<span
+				class={twMerge(
+					'text-primary dark:text-gray-400',
+					small ? '!text-2xs' : '!text-xs',
+					small ? 'top-0' : 'top-2',
+					noPadding ? '' : 'left-2'
+				)}>took {duration}ms</span
+			>
+		{/if}
+		{#if mem}
+			<span
+				class="{small ? '!text-2xs' : '!text-xs'} text-primary dark:text-gray-400 {small
+					? 'top-0'
+					: 'top-2'}  left-24">mem peak: {(mem / 1024).toPrecision(4)}MB</span
+			>
+		{/if}
+		<div class="flex-1"></div>
+		<div class="flex gap-2">
+			{#if jobId && download}
+				<div class="flex items-center">
+					<a
+						class="text-primary pb-0.5"
+						target="_blank"
+						href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
+						download="windmill_logs_{jobId}.txt"
+					>
+						<Download size="14" />
+					</a>
 				</div>
-			{:else if duration}
-				<span
-					class={twMerge(
-						'absolute  text-primary dark:text-gray-400',
-						small ? '!text-2xs' : '!text-xs',
-						small ? 'top-0' : 'top-2',
-						noPadding ? '' : 'left-2'
-					)}>took {duration}ms</span
-				>
 			{/if}
-			{#if mem}
-				<span
-					class="absolute {small ? '!text-2xs' : '!text-xs'} text-primary dark:text-gray-400 {small
-						? 'top-0'
-						: 'top-2'}  left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
+			<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
+			{#if !noAutoScroll}
+				<label
+					class="{small
+						? ''
+						: 'py-2'} pr-2 text-2xs flex gap-2 font-normal text-primary items-center"
 				>
+					Auto scroll
+					<input class="windmillapp rounded-md" type="checkbox" bind:checked={scroll} />
+				</label>
 			{/if}
-			<pre
-				class={twMerge(
-					'whitespace-pre break-words w-full ',
-					small ? '!text-2xs' : '!text-xs',
-					noPadding ? '' : 'p-2'
-				)}
-				>{#if content}{@const len =
-						(content?.length ?? 0) +
-						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
-							onclick={getStoreLogs}
-							>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
-						><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
-						/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
-						>{@html html}</span
-					>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
-			>
 		</div>
 	</div>
+	<div
+		bind:this={div}
+		class="w-full h-full overflow-auto bg-surface-secondary rounded-b-md relative pt-0 {noMaxH
+			? ''
+			: 'max-h-screen'}"
+		data-nav-id={navigationId}
+	>
+		<pre
+			class={twMerge(
+				'whitespace-pre break-words w-full ',
+				small ? '!text-2xs' : '!text-xs',
+				noPadding ? '' : 'p-2'
+			)}
+			>{#if content}{@const len =
+					(content?.length ?? 0) +
+					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button onclick={getStoreLogs}
+						>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
+					><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
+					/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
+					>{@html html}</span
+				>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
+		>
+	</div>
 </div>
 
 <style global>