Fix unsupported browser alert

app/routes/events-team_.outstanding.tsx

@@ -25,7 +25,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   const now = new Date();
@@ -56,6 +56,10 @@ export default function () {
   const [isBrowserSupported, setIsBrowserSupported] = useState(true);
   const toast = useToast();
 
+  useEffect(() => {
+    if (typeof structuredClone === "undefined") setIsBrowserSupported(false);
+  }, []);
+
   async function displayErrorToast(response: Response, title: string) {
     let msg = "Unknown error";
 
@@ -197,7 +201,7 @@ export default function () {
         <AlertIcon />
         The cutoff period for retroactively actioning events has passed.
       </Alert>
-      <Alert display={isBrowserSupported ? undefined : "none"} status="error">
+      <Alert display={isBrowserSupported ? "none" : undefined} status="error">
         <AlertIcon />
         This browser is unsupported. Please upgrade to a browser not several
         years out of date.