From ae019237d1a1f742cb5f3e4e8afecf8cd01f56c1 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Wed, 11 Mar 2026 18:52:26 +0100
Subject: [PATCH] runs page nits (#8325)

---
 CLAUDE.md                                     |  4 ++-
 frontend/src/lib/components/RunsPage.svelte   | 26 +++++++++++--------
 .../toggleButton-v2/ToggleButtonMore.svelte   | 12 ++++++---
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 0acc541c92..fe22fae0f7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -14,7 +14,7 @@ Open-source platform for internal tools, workflows, API integrations, background
 - **Validation**: `docs/validation.md` — what checks to run based on what you changed
 - **Enterprise**: `docs/enterprise.md` — EE file conventions and PR workflow
 - **Backend patterns**: use the `rust-backend` skill when writing Rust code
-- **Frontend patterns**: use the `svelte-frontend` skill when writing Svelte code
+- **Frontend patterns**: use the `svelte-frontend` skill when writing Svelte code. Do NOT edit svelte files unless you have read that skill.
 - **Domain guides**: `.claude/skills/native-trigger/` and `frontend/tutorial-system-guide.mdc`
 - **Brand/UI guidelines**: `frontend/brand-guidelines.md`
 
@@ -33,6 +33,7 @@ Open-source platform for internal tools, workflows, API integrations, background
 Using `$bindable(default_value)` on props that can be `undefined` is **banned**. This pattern causes subtle bugs because the default value masks the `undefined` state.
 
 **Bad:**
+
 ```svelte
 let { my_prop = $bindable(default_value) }: { my_prop?: string } = $props()
 ```
@@ -40,6 +41,7 @@ let { my_prop = $bindable(default_value) }: { my_prop?: string } = $props()
 **Correct alternatives:**
 
 1. **Use `$derived` with nullish coalescing** — handle the potential `undefined` at the usage site:
+
    ```svelte
    let { my_prop = $bindable() }: { my_prop?: string } = $props()
    let effective_value = $derived(my_prop ?? default_value)
diff --git a/frontend/src/lib/components/RunsPage.svelte b/frontend/src/lib/components/RunsPage.svelte
index 5aee359a4a..6de1461e20 100644
--- a/frontend/src/lib/components/RunsPage.svelte
+++ b/frontend/src/lib/components/RunsPage.svelte
@@ -595,7 +595,7 @@
 
 			<div class="hidden xl:flex gap-2 ml-6">
 				<ToggleButtonGroup
-					tabListClass="hidden 2xl:flex"
+					tabListClass="hidden xl:flex"
 					bind:selected={
 						() => filters.val.job_kinds ?? 'runs',
 						(v) => (v === 'runs' ? delete filters.val.job_kinds : (filters.val.job_kinds = v))
@@ -606,18 +606,17 @@
 						<ToggleButton
 							value="runs"
 							label="Runs"
-							showTooltipIcon
 							tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
 							{item}
 						/>
 						<ToggleButton
 							value="dependencies"
 							label="Deps"
-							showTooltipIcon
 							tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
 							{item}
 						/>
 						<ToggleButtonMore
+							hideSelectedOption={innerWidth < smallScreenWidth}
 							togglableItems={[
 								{
 									label: 'Previews',
@@ -743,7 +742,9 @@
 			<FilterSearchbar
 				class={twMerge(
 					'flex-1 relative min-w-[18rem]',
-					Object.keys(filters.val).length <= 3 ? 'max-w-[28rem]' : 'max-w-[34rem]',
+					Object.keys(filters.val).length <= 3
+						? 'max-w-[20rem] 2xl:max-w-[28rem]'
+						: 'max-w-[34rem]',
 					ButtonType.UnifiedMinHeightClasses.md
 				)}
 				schema={runsFilterSearchbarSchema}
@@ -784,7 +785,12 @@
 						tooltip={'How far behind the min datetime to start considering jobs for the concurrency graph. Change this value to include jobs started before the set time window for the computation of the graph'}
 					/>
 				{:else if !lastFetchWentToEnd && (jobs?.length ?? 0) >= (perPage.val ?? 1000)}
-					<Button wrapperClasses="ml-2" unifiedSize="md" loading={jobsLoader.loadingExtra} onClick={() => jobsLoader.loadExtraJobs()}>
+					<Button
+						wrapperClasses="ml-2"
+						unifiedSize="md"
+						loading={jobsLoader.loadingExtra}
+						onClick={() => jobsLoader.loadExtraJobs()}
+					>
 						Load more
 						<Tooltip>There are more jobs to load</Tooltip>
 					</Button>
@@ -830,7 +836,9 @@
 									<div class="flex-1 bg-surface-hover rounded-full h-1.5">
 										<div
 											class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
-											style="width: {Math.round((batchProgress.loaded / batchProgress.total) * 100)}%"
+											style="width: {Math.round(
+												(batchProgress.loaded / batchProgress.total) * 100
+											)}%"
 										></div>
 									</div>
 									{#if currentBatchSize != null}
@@ -849,11 +857,7 @@
 											}}
 										/>
 									{/if}
-									<Button
-										size="xs"
-										destructive
-										onClick={() => jobsLoader.stopBatchLoading()}
-									>
+									<Button size="xs" destructive onClick={() => jobsLoader.stopBatchLoading()}>
 										Stop
 									</Button>
 								</div>
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
index 9d6c1d2bc1..1300dc4322 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
@@ -4,6 +4,7 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import DropdownV2 from '$lib/components/DropdownV2.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import Tooltip from '$lib/components/meltComponents/Tooltip.svelte'
 
 	type TogglableItem = {
 		label: string
@@ -20,6 +21,7 @@
 		togglableItems: TogglableItem[]
 		btnText?: string
 		class?: string
+		hideSelectedOption?: boolean
 	}
 
 	let {
@@ -30,7 +32,8 @@
 		selected = $bindable(undefined),
 		togglableItems,
 		btnText,
-		class: className = ''
+		class: className = '',
+		hideSelectedOption = false
 	}: Props = $props()
 
 	let items = untrack(() => togglableItems).map((i) => ({
@@ -51,7 +54,7 @@
 	disappearTimeout={0}
 >
 	<div {id} class="flex">
-		{#if isAnOptionSelected(selected)}
+		{#if isAnOptionSelected(selected) && !hideSelectedOption}
 			{@const tooltip = togglableItems.find((i) => i.value === selected)?.tooltip}
 			<ToggleButton
 				{disabled}
@@ -65,7 +68,10 @@
 			/>
 		{/if}
 		<div class="flex items-center">
-			<DropdownV2 {btnText} enableFlyTransition {items} size={small ? 'sm' : 'md'} />
+			<!-- The tooltip fixes a bug where the other tooltips won't disappear -->
+			<Tooltip disablePopup>
+				<DropdownV2 {btnText} enableFlyTransition {items} size={small ? 'sm' : 'md'} />
+			</Tooltip>
 		</div>
 	</div>
 </Popover>