From fa6652c615354812c97bfa3e5c53874c9c711ece Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 11:44:16 +0100
Subject: [PATCH 1/2] fix(webapp): use native time filter mode controls

---
 .../app/components/runs/v3/SharedFilters.tsx  | 55 +++++++++++--------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 756af300ff9..93a8d8b1133 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -668,16 +668,18 @@ function TimeDropdown({
       >
         <div className="flex flex-col gap-4 p-3">
           {/* Duration section */}
-          <div
-            onClick={() => {
-              setActiveSection("duration");
-              setValidationError(null);
-              setSelectedQuickDate(null);
-            }}
-            className="flex cursor-pointer gap-3 rounded-md pb-3"
-          >
-            <RadioButtonCircle checked={activeSection === "duration"} />
-            <div className="flex flex-1 flex-col gap-1">
+          <div className="flex flex-col rounded-md pb-3">
+            <button
+              type="button"
+              aria-pressed={activeSection === "duration"}
+              onClick={() => {
+                setActiveSection("duration");
+                setValidationError(null);
+                setSelectedQuickDate(null);
+              }}
+              className="flex w-full cursor-pointer gap-3 text-left focus-custom"
+            >
+              <RadioButtonCircle checked={activeSection === "duration"} />
               <Label
                 className={cn(
                   "mb-2 transition-colors",
@@ -686,6 +688,8 @@ function TimeDropdown({
               >
                 {labelName} in the last
               </Label>
+            </button>
+            <div className="ml-8 flex flex-1 flex-col gap-1">
               <div className="grid grid-cols-4 gap-2">
                 {/* Custom duration row */}
                 <div
@@ -699,7 +703,6 @@ function TimeDropdown({
                       selectedPeriod === "custom" &&
                       "border-error"
                   )}
-                  onClick={(e) => e.stopPropagation()}
                 >
                   <input
                     type="number"
@@ -782,15 +785,17 @@ function TimeDropdown({
           </div>
 
           {/* Date range section */}
-          <div
-            onClick={() => {
-              setActiveSection("dateRange");
-              setValidationError(null);
-            }}
-            className="flex cursor-pointer gap-3"
-          >
-            <RadioButtonCircle checked={activeSection === "dateRange"} />
-            <div className="flex flex-1 flex-col">
+          <div className="flex flex-col">
+            <button
+              type="button"
+              aria-pressed={activeSection === "dateRange"}
+              onClick={() => {
+                setActiveSection("dateRange");
+                setValidationError(null);
+              }}
+              className="flex w-full cursor-pointer gap-3 text-left focus-custom"
+            >
+              <RadioButtonCircle checked={activeSection === "dateRange"} />
               <Label
                 className={cn(
                   "mb-3 transition-colors",
@@ -807,7 +812,9 @@ function TimeDropdown({
                   (in local time)
                 </span>
               </Label>
-              <div className="-ml-8 mb-2" onClick={(e) => e.stopPropagation()}>
+            </button>
+            <div className="ml-8 flex flex-1 flex-col">
+              <div className="mb-2">
                 <DateTimePicker
                   label="From"
                   value={fromValue}
@@ -823,7 +830,7 @@ function TimeDropdown({
                   showInlineLabel
                 />
               </div>
-              <div onClick={(e) => e.stopPropagation()} className="-ml-8">
+              <div>
                 <DateTimePicker
                   label="To"
                   value={toValue}
@@ -840,7 +847,7 @@ function TimeDropdown({
                 />
               </div>
               {/* Quick select date ranges */}
-              <div className="mt-2 grid grid-cols-2 gap-2" onClick={(e) => e.stopPropagation()}>
+              <div className="mt-2 grid grid-cols-2 gap-2">
                 <QuickDateButton
                   label="Yesterday"
                   isActive={selectedQuickDate === "yesterday"}
@@ -866,7 +873,7 @@ function TimeDropdown({
                   }}
                 />
               </div>
-              <div className="mt-2 grid grid-cols-3 gap-2" onClick={(e) => e.stopPropagation()}>
+              <div className="mt-2 grid grid-cols-3 gap-2">
                 <QuickDateButton
                   label="This week"
                   isActive={selectedQuickDate === "thisWeek"}

From df2132a69a90054d1c4cb34696e0e3aca2ee870f Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 12:56:41 +0100
Subject: [PATCH 2/2] fix(webapp): preserve time picker alignment

---
 apps/webapp/app/components/runs/v3/SharedFilters.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 93a8d8b1133..ee922513738 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -814,7 +814,7 @@ function TimeDropdown({
               </Label>
             </button>
             <div className="ml-8 flex flex-1 flex-col">
-              <div className="mb-2">
+              <div className="-ml-8 mb-2">
                 <DateTimePicker
                   label="From"
                   value={fromValue}
@@ -830,7 +830,7 @@ function TimeDropdown({
                   showInlineLabel
                 />
               </div>
-              <div>
+              <div className="-ml-8">
                 <DateTimePicker
                   label="To"
                   value={toValue}