From e3aa6ced14a20ebd0508586b91a88d5463cc5d91 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 23 Mar 2026 19:06:31 +0200
Subject: [PATCH] Fix /org/:slug calendar timestamps in SSR

---
 .../routes/org.$slug.tsx                      | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/features/tournament-organization/routes/org.$slug.tsx b/app/features/tournament-organization/routes/org.$slug.tsx
index f93685221..07283f5b0 100644
--- a/app/features/tournament-organization/routes/org.$slug.tsx
+++ b/app/features/tournament-organization/routes/org.$slug.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { Link as LinkIcon, Lock, LogOut, SquarePen, Users } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import type { MetaFunction } from "react-router";
@@ -22,6 +23,7 @@ import { useUser } from "~/features/auth/core/user";
 import { BadgeDisplay } from "~/features/badges/components/BadgeDisplay";
 import { BannedUsersList } from "~/features/tournament-organization/components/BannedPlayersList";
 import { SendouForm } from "~/form/SendouForm";
+import { useIsMounted } from "~/hooks/useIsMounted";
 import { useTimeFormat } from "~/hooks/useTimeFormat";
 import { useHasPermission, useHasRole } from "~/modules/permissions/hooks";
 import { databaseTimestampNow, databaseTimestampToDate } from "~/utils/dates";
@@ -501,6 +503,7 @@ function EventInfo({
 	showYear?: boolean;
 }) {
 	const { formatDateTime } = useTimeFormat();
+	const isMounted = useIsMounted();
 
 	return (
 		<div className="stack sm">
@@ -517,14 +520,18 @@ function EventInfo({
 				) : null}
 				<div>
 					<div>{event.name}</div>
-					<time className={styles.eventInfoTime} suppressHydrationWarning>
-						{formatDateTime(databaseTimestampToDate(event.startTime), {
-							day: "numeric",
-							month: "numeric",
-							hour: "numeric",
-							minute: "numeric",
-							year: showYear ? "numeric" : undefined,
-						})}
+					<time
+						className={clsx(styles.eventInfoTime, { invisible: !isMounted })}
+					>
+						{isMounted
+							? formatDateTime(databaseTimestampToDate(event.startTime), {
+									day: "numeric",
+									month: "numeric",
+									hour: "numeric",
+									minute: "numeric",
+									year: showYear ? "numeric" : undefined,
+								})
+							: "X"}
 					</time>
 				</div>
 			</Link>