fix(webapp): sync custom duration state when period prop changes

Add useEffect to update customValue and customUnit when the period prop
changes, fixing stale values in the custom input fields after selecting
a preset time period.

Co-authored-by: Eric Allam <ericallam@users.noreply.github.com>

Author: github-actions[bot]

apps/webapp/app/components/runs/v3/SharedFilters.tsx

@@ -2,7 +2,7 @@ import * as Ariakit from "@ariakit/react";
 import type { RuntimeEnvironment } from "@trigger.dev/database";
 import parse from "parse-duration";
 import type { ReactNode } from "react";
-import { startTransition, useCallback, useState } from "react";
+import { startTransition, useCallback, useEffect, useState } from "react";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
 import { DateField } from "~/components/primitives/DateField";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -304,6 +304,13 @@ export function TimeDropdown({
   const [customValue, setCustomValue] = useState(initialCustom.value);
   const [customUnit, setCustomUnit] = useState(initialCustom.unit);
 
+  // Sync custom duration state when period prop changes
+  useEffect(() => {
+    const parsed = getInitialCustomDuration(period);
+    setCustomValue(parsed.value);
+    setCustomUnit(parsed.unit);
+  }, [period]);
+
   const applyDateRange = useCallback(() => {
     replace({
       period: undefined,