fix(webapp): derive date tooltip offset from the displayed timezone

The date/time tooltip's "Local" row formatted its time in the viewer's configured timezone but computed the "(UTC +n)" label from the browser's own offset at the current moment. When those differed (a viewer whose machine is UTC but whose timezone preference is elsewhere), the label contradicted the time shown, e.g. "Local (UTC +0)" next to a value three hours ahead of UTC. Using the current moment also made the label wrong for dates in the opposite DST phase.

Compute the offset from the same date and timezone used to render the row, so the label always matches the displayed time and stays correct across DST boundaries.

Author: matt-aitken

.server-changes/datetime-tooltip-local-offset.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Fix the timezone offset label in the date/time tooltip so it matches the displayed local time and stays correct across daylight saving boundaries.

apps/webapp/app/components/primitives/DateTime.tsx

@@ -178,6 +178,31 @@ export function formatDateTimeISO(date: Date, timeZone: string): string {
   );
 }
 
+/**
+ * Human-readable UTC offset for a timezone at a specific instant, e.g. "(UTC +3)".
+ * Returns "" for UTC. The offset must be derived from the same (date, timeZone) pair
+ * used to render the displayed time so the label always matches the value shown — and
+ * so it stays correct across DST boundaries regardless of the viewer's current season.
+ */
+export function formatUtcOffset(date: Date, timeZone: string): string {
+  if (timeZone === "UTC") return "";
+
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    timeZoneName: "longOffset",
+  }).formatToParts(date);
+
+  // longOffset yields "GMT+03:00", "GMT-08:00", "GMT+05:30", or "GMT" for UTC-equivalent zones.
+  const raw = parts.find((part) => part.type === "timeZoneName")?.value.replace("GMT", "") ?? "";
+  const match = raw.match(/^([+-])(\d{2}):(\d{2})$/);
+  if (!match) return "(UTC +0)";
+
+  const [, sign, hh, mm] = match;
+  const hours = parseInt(hh, 10);
+  const minutes = parseInt(mm, 10);
+  return `(UTC ${sign}${hours}${minutes ? `:${minutes.toString().padStart(2, "0")}` : ""})`;
+}
+
 // New component that only shows date when it changes
 export const SmartDateTime = ({ date, previousDate = null, hour12 = true }: DateTimeProps) => {
   const locales = useLocales();
@@ -445,32 +470,22 @@ type DateTimeTooltipContentProps = {
   dateTime: string;
   isoDateTime: string;
   icon: ReactNode;
+  offset?: string;
 };
 
 function DateTimeTooltipContent({
   title,
   dateTime,
   isoDateTime,
   icon,
+  offset,
 }: DateTimeTooltipContentProps) {
-  const getUtcOffset = useMemo(
-    () => () => {
-      if (title !== "Local") return "";
-      const offset = -new Date().getTimezoneOffset();
-      const sign = offset >= 0 ? "+" : "-";
-      const hours = Math.abs(Math.floor(offset / 60));
-      const minutes = Math.abs(offset % 60);
-      return `(UTC ${sign}${hours}${minutes ? `:${minutes.toString().padStart(2, "0")}` : ""})`;
-    },
-    [title]
-  );
-
   return (
     <div className="flex flex-col gap-1">
       <div className="flex items-center gap-1 text-sm">
         {icon}
         <span className="font-medium">{title}</span>
-        <span className="font-normal text-text-dimmed">{getUtcOffset()}</span>
+        {offset ? <span className="font-normal text-text-dimmed">{offset}</span> : null}
       </div>
       <div className="flex items-center justify-between gap-2">
         <Paragraph variant="extra-small" className="text-text-dimmed">
@@ -515,6 +530,7 @@ function TooltipContent({
           dateTime={formatDateTime(realDate, localTimeZone, locales, true, true, true)}
           isoDateTime={formatDateTimeISO(realDate, localTimeZone)}
           icon={<Laptop className="size-4 text-green-500" />}
+          offset={formatUtcOffset(realDate, localTimeZone)}
         />
       </div>
     </div>

apps/webapp/test/components/DateTime.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { formatDateTimeISO } from "~/components/primitives/DateTime";
+import { formatDateTimeISO, formatUtcOffset } from "~/components/primitives/DateTime";
 
 describe("formatDateTimeISO", () => {
   it("should format UTC dates with Z suffix", () => {
@@ -52,3 +52,45 @@ describe("formatDateTimeISO", () => {
     expect(result).toBe("2025-04-29T15:01:19.123+01:00");
   });
 });
+
+describe("formatUtcOffset", () => {
+  const date = new Date("2026-06-30T13:16:26.000Z");
+
+  it("returns an empty string for UTC", () => {
+    expect(formatUtcOffset(date, "UTC")).toBe("");
+  });
+
+  it("returns an empty offset for UTC-equivalent zones", () => {
+    expect(formatUtcOffset(date, "Atlantic/Reykjavik")).toBe("(UTC +0)");
+  });
+
+  // The reported bug: the offset label must reflect the displayed timezone, not the
+  // viewer's machine. A viewer on a UTC machine looking at a UTC+3 zone must see +3.
+  it("reflects the timezone being displayed, not the viewer's machine", () => {
+    expect(formatUtcOffset(date, "Europe/Moscow")).toBe("(UTC +3)");
+  });
+
+  it("formats half-hour offsets", () => {
+    expect(formatUtcOffset(date, "Asia/Kolkata")).toBe("(UTC +5:30)");
+  });
+
+  it("formats negative offsets", () => {
+    expect(formatUtcOffset(date, "America/Los_Angeles")).toBe("(UTC -7)");
+  });
+
+  // The offset is derived from the given instant, so it stays correct across DST
+  // boundaries regardless of what season the viewer is currently in.
+  describe("is DST-aware for the given instant", () => {
+    it("uses +0 for a London winter date", () => {
+      expect(formatUtcOffset(new Date("2026-01-15T12:00:00.000Z"), "Europe/London")).toBe(
+        "(UTC +0)"
+      );
+    });
+
+    it("uses +1 for a London summer date", () => {
+      expect(formatUtcOffset(new Date("2026-07-15T12:00:00.000Z"), "Europe/London")).toBe(
+        "(UTC +1)"
+      );
+    });
+  });
+});