From c1270f6c9c67df5104a90f03511b04235cd5ef81 Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Wed, 11 Mar 2026 15:13:50 -0700
Subject: [PATCH] Fix game datetime timezone handling in bracket admin (#137)

- Convert datetime-local input value to UTC ISO string on form submit
  so server correctly parses local time instead of treating it as UTC
- Show local timezone abbreviation (e.g. PDT) in the field label
- Hoist timezone abbreviation computation out of the matches render loop

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ...n.sports-seasons.$id.events.$eventId.bracket.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/routes/admin.sports-seasons.$id.events.$eventId.bracket.tsx b/app/routes/admin.sports-seasons.$id.events.$eventId.bracket.tsx
index 1ef87ea..613084e 100644
--- a/app/routes/admin.sports-seasons.$id.events.$eventId.bracket.tsx
+++ b/app/routes/admin.sports-seasons.$id.events.$eventId.bracket.tsx
@@ -49,6 +49,9 @@ export default function EventBracket({
   const [selectedWinners, setSelectedWinners] = useState<Record<string, string>>({});
   const [knockoutAssignments, setKnockoutAssignments] = useState<Record<string, string>>({});
   const [expandedMatches, setExpandedMatches] = useState<Set<string>>(new Set());
+  const localTzAbbr = new Intl.DateTimeFormat("en-US", { timeZoneName: "short" })
+    .formatToParts(new Date())
+    .find(p => p.type === "timeZoneName")?.value ?? "local";
 
   const toggleMatchExpanded = (matchId: string) => {
     setExpandedMatches(prev => {
@@ -723,7 +726,13 @@ export default function EventBracket({
                                     )}
 
                                     {/* Add game form */}
-                                    <Form method="post" className="flex gap-2 items-end">
+                                    <Form method="post" className="flex gap-2 items-end" onSubmit={(e) => {
+                                      const form = e.currentTarget;
+                                      const scheduledAtInput = form.elements.namedItem("scheduledAt") as HTMLInputElement;
+                                      if (scheduledAtInput?.value) {
+                                        scheduledAtInput.value = new Date(scheduledAtInput.value).toISOString();
+                                      }
+                                    }}>
                                       <input type="hidden" name="intent" value="add-game" />
                                       <input type="hidden" name="matchId" value={match.id} />
                                       <div className="flex-1">
@@ -739,7 +748,7 @@ export default function EventBracket({
                                         />
                                       </div>
                                       <div className="flex-1">
-                                        <Label className="text-xs">Date &amp; Time</Label>
+                                        <Label className="text-xs">Date &amp; Time ({localTzAbbr})</Label>
                                         <Input
                                           name="scheduledAt"
                                           type="datetime-local"