fix: move filters above tabs on Runs page (#19727)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

ui-v2/src/components/runs/runs-page.tsx

@@ -115,58 +115,53 @@ export const RunsPage = ({
 	return (
 		<div className="flex flex-col gap-4">
 			<RunsHeader />
+			<div className="flex items-center gap-4">
+				<div className="w-64">
+					<StateFilter
+						selectedFilters={selectedStates}
+						onSelectFilter={onStateFilterChange}
+					/>
+				</div>
+				<div className="w-64">
+					<FlowFilter
+						selectedFlows={selectedFlows}
+						onSelectFlows={onFlowFilterChange}
+					/>
+				</div>
+				<DateRangeFilter value={dateRange} onValueChange={onDateRangeChange} />
+			</div>
 			<Tabs value={tab} onValueChange={onTabChange}>
 				<TabsList>
 					<TabsTrigger value="flow-runs">Flow Runs</TabsTrigger>
 					<TabsTrigger value="task-runs">Task Runs</TabsTrigger>
 				</TabsList>
 				<TabsContent value="flow-runs">
 					<div className="flex flex-col gap-4">
-						<div className="flex flex-col gap-4">
+						<div className="flex items-center justify-between">
+							<FlowRunsRowCount
+								count={flowRunsCount}
+								results={flowRunsWithFlows}
+								selectedRows={selectedRows}
+								setSelectedRows={setSelectedRows}
+							/>
 							<div className="flex items-center gap-4">
-								<div className="w-64">
-									<StateFilter
-										selectedFilters={selectedStates}
-										onSelectFilter={onStateFilterChange}
-									/>
-								</div>
-								<div className="w-64">
-									<FlowFilter
-										selectedFlows={selectedFlows}
-										onSelectFlows={onFlowFilterChange}
+								<div className="flex items-center gap-2 whitespace-nowrap">
+									<Switch
+										id="hide-subflows"
+										checked={hideSubflows}
+										onCheckedChange={onHideSubflowsChange}
 									/>
+									<Label htmlFor="hide-subflows">Hide subflows</Label>
 								</div>
-								<DateRangeFilter
-									value={dateRange}
-									onValueChange={onDateRangeChange}
+								<SearchInput
+									value={flowRunSearch}
+									onChange={(e) => onFlowRunSearchChange(e.target.value)}
+									placeholder="Search by flow run name"
+									aria-label="Search by flow run name"
+									className="w-64"
+									debounceMs={1200}
 								/>
-							</div>
-							<div className="flex items-center justify-between">
-								<FlowRunsRowCount
-									count={flowRunsCount}
-									results={flowRunsWithFlows}
-									selectedRows={selectedRows}
-									setSelectedRows={setSelectedRows}
-								/>
-								<div className="flex items-center gap-4">
-									<div className="flex items-center gap-2 whitespace-nowrap">
-										<Switch
-											id="hide-subflows"
-											checked={hideSubflows}
-											onCheckedChange={onHideSubflowsChange}
-										/>
-										<Label htmlFor="hide-subflows">Hide subflows</Label>
-									</div>
-									<SearchInput
-										value={flowRunSearch}
-										onChange={(e) => onFlowRunSearchChange(e.target.value)}
-										placeholder="Search by flow run name"
-										aria-label="Search by flow run name"
-										className="w-64"
-										debounceMs={1200}
-									/>
-									<SortFilter value={sort} onSelect={onSortChange} />
-								</div>
+								<SortFilter value={sort} onSelect={onSortChange} />
 							</div>
 						</div>
 						<FlowRunsPagination