From ebb38ef92fae98fe8249c5084f654de03205901c Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 7 Oct 2026 18:19:25 +0200
Subject: [PATCH] feat: pad the home table, dash empty run cells and narrow
 home alerts

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/common/table/Row.svelte    |  2 +-
 frontend/src/lib/components/home/ItemsList.svelte |  4 ++--
 .../components/home/RunnableActivityCells.svelte  |  4 +++-
 frontend/src/lib/components/home/TreeView.svelte  |  2 +-
 .../src/lib/components/home/TreeViewRoot.svelte   |  2 +-
 frontend/src/routes/(root)/(logged)/+page.svelte  | 15 +++++++++------
 6 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index 3fbb95a69e..382d714e10 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -201,7 +201,7 @@
 		data-row-keyboard-selected={keyboardSelected ? 'true' : undefined}
 		class={twMerge(
 			HOME_TABLE_GRID,
-			'group/row relative w-full px-3 py-2.5 rounded-md',
+			'group/row relative w-full pl-5 pr-3 py-2.5 rounded-md',
 			disabled ? 'opacity-25' : 'hover:bg-surface-hover',
 			inSelectionMode ? 'cursor-pointer select-none' : '',
 			rowSelection?.selected
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index 00b9671ef5..8ea43e2973 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -2185,7 +2185,7 @@
 					{#each [...visiblePipelineFolders].sort() as folder (folder)}
 						<a
 							href="{base}/pipeline/{encodeURIComponent(folder)}"
-							class="w-full inline-flex items-center gap-4 px-3 py-2 rounded-md hover:bg-surface-hover transition-colors text-sm"
+							class="w-full inline-flex items-center gap-4 pl-5 pr-3 py-2 rounded-md hover:bg-surface-hover transition-colors text-sm"
 						>
 							<NetworkIcon size={16} class="text-emerald-600 dark:text-emerald-400" />
 							<span class="text-xs font-medium text-emphasis truncate">Pipeline · f/{folder}</span>
@@ -2245,7 +2245,7 @@
 </CenteredPage>
 
 {#snippet tableHeader()}
-	<div class="{HOME_TABLE_GRID} px-3 py-1.5 border-b text-2xs font-medium text-secondary">
+	<div class="{HOME_TABLE_GRID} pl-5 pr-3 py-1.5 border-b text-2xs font-medium text-secondary">
 		<div class="flex items-center">
 			{#if homeSelection.available}
 				{@const state = homeSelection.renderedSelection}
diff --git a/frontend/src/lib/components/home/RunnableActivityCells.svelte b/frontend/src/lib/components/home/RunnableActivityCells.svelte
index 1fa7547035..d273fdfaeb 100644
--- a/frontend/src/lib/components/home/RunnableActivityCells.svelte
+++ b/frontend/src/lib/components/home/RunnableActivityCells.svelte
@@ -72,7 +72,7 @@
 
 {#if homeActivity}
 	<div class="relative z-[1] hidden lg:flex w-5 shrink-0 justify-center">
-		{#if kind}
+		{#if kind && !(activity && runs.length === 0)}
 			<Tooltip>
 				<a
 					href="{base}/runs/{path}"
@@ -106,6 +106,8 @@
 					{/if}
 				{/snippet}
 			</Tooltip>
+		{:else}
+			<span class="text-hint text-2xs opacity-40">–</span>
 		{/if}
 	</div>
 
diff --git a/frontend/src/lib/components/home/TreeView.svelte b/frontend/src/lib/components/home/TreeView.svelte
index 915e0d453f..e5f9531308 100644
--- a/frontend/src/lib/components/home/TreeView.svelte
+++ b/frontend/src/lib/components/home/TreeView.svelte
@@ -74,7 +74,7 @@
 	}: Props = $props()
 
 	// The home table draws no separators between its rows.
-	const separator = isHomeTable() ? 'rounded-md hover:bg-surface-hover' : 'border-b'
+	const separator = isHomeTable() ? 'pl-5 rounded-md hover:bg-surface-hover' : 'border-b'
 
 	let visualDepth = $derived(depth + indent)
 
diff --git a/frontend/src/lib/components/home/TreeViewRoot.svelte b/frontend/src/lib/components/home/TreeViewRoot.svelte
index 485dcfcf3c..b959a1c56a 100644
--- a/frontend/src/lib/components/home/TreeViewRoot.svelte
+++ b/frontend/src/lib/components/home/TreeViewRoot.svelte
@@ -287,7 +287,7 @@
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						onclick={toggleOtherUsers}
-						class="px-3 py-2 rounded-md hover:bg-surface-hover w-full flex flex-row items-center justify-between cursor-pointer"
+						class="pl-5 pr-3 py-2 rounded-md hover:bg-surface-hover w-full flex flex-row items-center justify-between cursor-pointer"
 					>
 						<div class="flex flex-row items-center gap-4">
 							<Users size={16} class="text-secondary" />
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index d6c29c53e3..015ab00400 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -278,14 +278,17 @@
 		{/if}
 
 		{#if $workspaceStore == 'admins'}
-			<Alert title="Admins workspace">
-				The Admins workspace is for admins only and contains scripts whose purpose is to manage your
-				Windmill instance, such as keeping resource types up to date.
-			</Alert>
-			<div class="my-4"></div>
+			<div class="max-w-[40rem] mx-auto mb-4">
+				<Alert title="Admins workspace">
+					The Admins workspace is for admins only and contains scripts whose purpose is to manage
+					your Windmill instance, such as keeping resource types up to date.
+				</Alert>
+			</div>
 		{/if}
 
-		<NoDirectDeployAlert onUpdateCanEditStatus={(v) => (showCreateButtons = v)} />
+		<div class="max-w-[40rem] mx-auto">
+			<NoDirectDeployAlert onUpdateCanEditStatus={(v) => (showCreateButtons = v)} />
+		</div>
 
 		{#if tab == 'hub'}
 			<div class="flex flex-col gap-y-16">