diff --git a/frontend/src/lib/components/common/InlineCalendarInput.svelte b/frontend/src/lib/components/common/InlineCalendarInput.svelte
index 2ef2e4bd2f..7c20af8e74 100644
--- a/frontend/src/lib/components/common/InlineCalendarInput.svelte
+++ b/frontend/src/lib/components/common/InlineCalendarInput.svelte
@@ -63,9 +63,18 @@
 
 	type Props = (DateProps | RangeProps) & {
 		class?: string
+		// Portal the month/year dropdowns to the body so they escape an `overflow`
+		// ancestor (e.g. a scroll-contained popover). Off by default: in-flow.
+		portalSelects?: boolean
 	}
 
-	let { mode = 'date', value = $bindable(), class: className, ...rest }: Props = $props()
+	let {
+		mode = 'date',
+		value = $bindable(),
+		class: className,
+		portalSelects = false,
+		...rest
+	}: Props = $props()
 
 	const onClickBehavior = $derived(
 		mode === 'range' ? ((rest as RangeProps).onClickBehavior ?? 'set-range') : 'set-range'
@@ -425,14 +434,14 @@
 			<Select
 				class="basis-1/2"
 				inputClass="text-center !rounded-r-none !border-r-0"
-				disablePortal
+				disablePortal={!portalSelects}
 				bind:value={viewMonth}
 				items={MONTH_NAMES.map((name, i) => ({ label: name, value: i + 1 }))}
 			/>
 			<Select
 				class="basis-1/2"
 				inputClass="text-center !rounded-l-none !border-l-0"
-				disablePortal
+				disablePortal={!portalSelects}
 				bind:value={viewYear}
 				onCreateItem={(val) => (viewYear = parseInt(val) || viewYear)}
 				items={YEAR_LIST.map((year) => ({ label: year.toString(), value: year }))}
diff --git a/frontend/src/lib/components/runs/TimeframeSelect.svelte b/frontend/src/lib/components/runs/TimeframeSelect.svelte
index cc5a99f70c..f8d2b0df71 100644
--- a/frontend/src/lib/components/runs/TimeframeSelect.svelte
+++ b/frontend/src/lib/components/runs/TimeframeSelect.svelte
@@ -78,6 +78,8 @@
 <script lang="ts">
 	import { CalendarIcon, RefreshCw } from 'lucide-svelte'
 	import { Button } from '../common'
+	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import Popover from '../meltComponents/Popover.svelte'
 	import { watch } from 'runed'
 	import { page } from '$app/state'
@@ -98,6 +100,14 @@
 
 	let isOpen = $state(false)
 
+	// The two-calendar desktop popover needs ~780px (two min-w-9 grids + presets +
+	// popover padding); below that it overflows. Under 800px use a single calendar
+	// with a Start/End toggle, which keeps each bound's date + time inputs.
+	const TWO_CALENDAR_MIN_WIDTH = 800
+	let innerWidth = $state<number | undefined>(undefined)
+	const isSmall = $derived(innerWidth != undefined && innerWidth < TWO_CALENDAR_MIN_WIDTH)
+	let smallBound = $state<'start' | 'end'>('start')
+
 	function onManualInput(input: { minTs?: string | null; maxTs?: string | null }) {
 		if (value.type !== 'manual')
 			value = buildManualTimeframe(input.minTs ?? null, input.maxTs ?? null)
@@ -113,6 +123,22 @@
 	}
 </script>
 
+<svelte:window bind:innerWidth />
+
+{#snippet presetButtons()}
+	{#each items as item (item.label)}
+		<Button
+			onClick={() => (value = { ...item })}
+			variant="subtle"
+			unifiedSize="md"
+			selected={value.label === item.label}
+			btnClasses="justify-start text-nowrap"
+		>
+			{item.label}
+		</Button>
+	{/each}
+{/snippet}
+
 <div class="relative flex {wrapperClasses}">
 	<Button
 		unifiedSize="md"
@@ -134,7 +160,12 @@
 			Reset
 		</Button>
 	{/if}
-	<Popover enableFlyTransition bind:isOpen>
+	<Popover
+		enableFlyTransition
+		placement="bottom-end"
+		contentClasses={isSmall ? 'overflow-y-auto' : ''}
+		bind:isOpen
+	>
 		{#snippet trigger()}
 			<Button
 				unifiedSize="md"
@@ -152,41 +183,63 @@
 					value.type === 'manual' && value.minTs ? new Date(value.minTs) : undefined
 				)
 			}}
-			<div class="flex divide-x">
-				<div class="flex flex-col p-2">
-					{#each items as item}
-						<Button
-							onClick={() => (value = { ...item })}
-							variant="subtle"
-							unifiedSize="md"
-							selected={value.label === item.label}
-							btnClasses="justify-start text-nowrap"
-						>
-							{item.label}
-						</Button>
-					{/each}
+			{#if isSmall}
+				<div class="flex flex-col divide-y max-w-[calc(100vw-2rem)]">
+					<div class="flex flex-row flex-wrap gap-1 p-2">
+						{@render presetButtons()}
+					</div>
+					<div class="flex flex-col gap-2 p-2">
+						<ToggleButtonGroup bind:selected={smallBound} class="w-full">
+							{#snippet children({ item })}
+								<ToggleButton value="start" label="Start" {item} />
+								<ToggleButton value="end" label="End" {item} />
+							{/snippet}
+						</ToggleButtonGroup>
+						<InlineCalendarInput
+							class="w-full"
+							infiniteRange
+							portalSelects
+							mode="range"
+							onClickBehavior={smallBound === 'end' ? 'set-end' : 'set-start'}
+							bind:value={
+								() => range,
+								(v) =>
+									onManualInput(
+										smallBound === 'end'
+											? { maxTs: fromCalendarDate(v.end)?.toISOString() ?? null }
+											: { minTs: fromCalendarDate(v.start)?.toISOString() ?? null }
+									)
+							}
+						/>
+					</div>
 				</div>
-				<InlineCalendarInput
-					class="p-4 max-w-[18rem]"
-					infiniteRange
-					mode="range"
-					onClickBehavior="set-start"
-					bind:value={
-						() => range,
-						(v) => onManualInput({ minTs: fromCalendarDate(v.start)?.toISOString() ?? null })
-					}
-				/>
-				<InlineCalendarInput
-					class="p-4 max-w-[18rem]"
-					infiniteRange
-					mode="range"
-					onClickBehavior="set-end"
-					bind:value={
-						() => range,
-						(v) => onManualInput({ maxTs: fromCalendarDate(v.end)?.toISOString() ?? null })
-					}
-				/>
-			</div>
+			{:else}
+				<div class="flex divide-x">
+					<div class="flex flex-col p-2">
+						{@render presetButtons()}
+					</div>
+					<InlineCalendarInput
+						class="p-4 max-w-[18rem]"
+						infiniteRange
+						mode="range"
+						onClickBehavior="set-start"
+						bind:value={
+							() => range,
+							(v) => onManualInput({ minTs: fromCalendarDate(v.start)?.toISOString() ?? null })
+						}
+					/>
+					<InlineCalendarInput
+						class="p-4 max-w-[18rem]"
+						infiniteRange
+						mode="range"
+						onClickBehavior="set-end"
+						bind:value={
+							() => range,
+							(v) => onManualInput({ maxTs: fromCalendarDate(v.end)?.toISOString() ?? null })
+						}
+					/>
+				</div>
+			{/if}
 		{/snippet}
 	</Popover>
 </div>