From d916e68a20cd98b600845571817f185ace18f848 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Sat, 27 Sep 2025 15:41:12 +0200
Subject: [PATCH] RunsFilter fix

---
 frontend/src/lib/components/DateTimeInput.svelte   | 13 ++++---------
 frontend/src/lib/components/runs/RunOption.svelte  |  4 ++--
 frontend/src/lib/components/runs/RunsFilter.svelte | 14 +++++++-------
 .../(root)/(logged)/runs/[...path]/+page.svelte    |  6 +++++-
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
index b15fcc873b..4b1cd1d4d3 100644
--- a/frontend/src/lib/components/DateTimeInput.svelte
+++ b/frontend/src/lib/components/DateTimeInput.svelte
@@ -111,25 +111,20 @@
 		bind:value={date}
 		{autofocus}
 		{disabled}
-		class={twMerge(inputBaseClass, inputBorderClass(), 'h-8 text-sm !w-3/4 ', inputClass)}
+		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-3/4 ', inputClass)}
 		min={minDate}
 		max={maxDate}
 	/>
 	<input
 		type="time"
 		bind:value={time}
-		class={twMerge(
-			inputBaseClass,
-			inputBorderClass(),
-			'h-8 text-sm !w-1/4 min-w-[100px] ',
-			inputClass
-		)}
+		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-1/4 min-w-[100px] ', inputClass)}
 		{disabled}
 	/>
 	<Button
 		variant="contained"
 		color="light"
-		wrapperClasses="h-8"
+		wrapperClasses="h-full"
 		btnClasses="bg-surface-secondary"
 		startIcon={{
 			icon: Clock
@@ -175,7 +170,7 @@
 		<Button
 			variant="border"
 			color="light"
-			wrapperClasses="h-8"
+			wrapperClasses="h-full"
 			{disabled}
 			on:click={() => {
 				value = undefined
diff --git a/frontend/src/lib/components/runs/RunOption.svelte b/frontend/src/lib/components/runs/RunOption.svelte
index fd70dc58dc..88abd5286f 100644
--- a/frontend/src/lib/components/runs/RunOption.svelte
+++ b/frontend/src/lib/components/runs/RunOption.svelte
@@ -12,10 +12,10 @@
 	let { label, children, tooltip, for: forAttr = '', noLabel = false }: Props = $props()
 </script>
 
-<div class="flex flex-col items-start w-fit">
+<div class="flex flex-col items-start w-fit gap-0.5">
 	<div class="text-xs truncate">
 		{#if forAttr}
-			<label for={forAttr} class:text-transparent={noLabel}>{label}</label>
+			<label for={forAttr} class="text-hint" class:text-transparent={noLabel}>{label}</label>
 		{:else}
 			<span class:text-transparent={noLabel}>{label}</span>
 		{/if}
diff --git a/frontend/src/lib/components/runs/RunsFilter.svelte b/frontend/src/lib/components/runs/RunsFilter.svelte
index 429929f910..c4b90d2d7e 100644
--- a/frontend/src/lib/components/runs/RunsFilter.svelte
+++ b/frontend/src/lib/components/runs/RunsFilter.svelte
@@ -186,7 +186,7 @@
 	<div class="flex flex-row gap-4">
 		<RunOption label="Filter by" for="filter-by">
 			<ToggleButtonGroup
-				class="h-full"
+				class="h-9"
 				bind:selected={filterBy}
 				on:selected={(e) => {
 					if (e.detail != filterBy) {
@@ -227,7 +227,7 @@
 						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
 						clearable
 						onClear={() => ((user = null), dispatch('reset'))}
-						inputClass="!h-full min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (usernames.push(item), (user = item))}
 						createText="Press enter to use this value"
 						id="user"
@@ -242,7 +242,7 @@
 						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
 						clearable
 						onClear={() => ((folder = null), dispatch('reset'))}
-						inputClass="!h-full min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						id="folder"
 					/>
 				{/key}
@@ -255,7 +255,7 @@
 						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
 						clearable
 						onClear={() => ((path = null), dispatch('reset'))}
-						inputClass="!h-full min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (paths.push(item), (path = item))}
 						createText="Press enter to use this value"
 						id="path"
@@ -480,7 +480,7 @@
 	<RunOption label="Kind" for="kind">
 		{#if small && !calendarSmall}
 			<DropdownSelect
-				btnClasses="min-w-24"
+				btnClasses="min-w-24 h-9 bg-surface-secondary font-normal"
 				items={[
 					{
 						displayName: 'All',
@@ -525,7 +525,7 @@
 				selected={jobKindsCat}
 			/>
 		{:else}
-			<ToggleButtonGroup bind:selected={jobKindsCat} class="h-full">
+			<ToggleButtonGroup bind:selected={jobKindsCat} class="h-9">
 				{#snippet children({ item })}
 					<ToggleButton value="all" label="All" {item} />
 					<ToggleButton
@@ -572,7 +572,7 @@
 	<!-- Status -->
 	<RunOption label="Status" for="status">
 		<ToggleButtonGroup
-			class="h-full"
+			class="h-9"
 			selected={success ?? 'all'}
 			on:selected={({ detail }) => {
 				success = detail === 'all' ? undefined : detail
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index c6889d7466..3937a42c95 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -953,6 +953,7 @@
 						{#if minTs || maxTs}
 							<input
 								type="text"
+								class="!text-sm text-tertiary !bg-surface-secondary h-9 !border-none"
 								value={minTs ? new Date(minTs).toLocaleString() : 'zoom x axis to set min'}
 								disabled
 								name="min-datetimes"
@@ -984,6 +985,7 @@
 						{#if maxTs || minTs}
 							<input
 								type="text"
+								class="!text-sm text-tertiary !bg-surface-secondary h-9 !border-none"
 								value={maxTs ? new Date(maxTs).toLocaleString() : 'zoom x axis to set max'}
 								name="max-datetimes"
 								disabled
@@ -1013,7 +1015,9 @@
 
 					{#if minTs || maxTs}
 						<RunOption label="Reset" for="reset" noLabel>
-							<Button color="light" variant="border" size="xs" onClick={reset}>Reset</Button>
+							<Button color="light" variant="border" size="xs" onClick={reset} btnClasses="h-9">
+								Reset
+							</Button>
 						</RunOption>
 					{/if}
 				</div>