runs page nits (#8325)

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)

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>

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>