From ea98b2bd5a702902b70328f447e4c76595d78327 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 05:48:13 +0100
Subject: [PATCH] fix mobile support on the new forms

---
 src/app/components/player/lookup-player.tsx | 2 +-
 src/app/components/server/lookup-server.tsx | 2 +-
 src/app/components/stats.tsx                | 7 ++++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/components/player/lookup-player.tsx b/src/app/components/player/lookup-player.tsx
index 6300c96..f730e34 100644
--- a/src/app/components/player/lookup-player.tsx
+++ b/src/app/components/player/lookup-player.tsx
@@ -40,7 +40,7 @@ export function LookupPlayer(): ReactElement {
 
   return (
     <form
-      className="flex flex-col gap-2 justify-center items-center mt-4"
+      className="flex flex-col gap-2 justify-center items-center mt-4 flex-wrap"
       action={(form: FormData) => {
         lookupPlayer(form.get("query") as string);
       }}
diff --git a/src/app/components/server/lookup-server.tsx b/src/app/components/server/lookup-server.tsx
index 2b88e6f..a001f9f 100644
--- a/src/app/components/server/lookup-server.tsx
+++ b/src/app/components/server/lookup-server.tsx
@@ -51,7 +51,7 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme
         lookupServer(form.get("platform") as ServerPlatform, form.get("query") as string);
       }}
     >
-      <div className="flex gap-2 justify-center">
+      <div className="flex gap-2 justify-center flex-wrap">
         <div className="flex flex-col gap-2 items-start">
           <Label htmlFor="platform">Platform</Label>
           <Select name="platform" defaultValue={currentPlatform}>
diff --git a/src/app/components/stats.tsx b/src/app/components/stats.tsx
index cba9b1d..f8dd59d 100644
--- a/src/app/components/stats.tsx
+++ b/src/app/components/stats.tsx
@@ -3,7 +3,7 @@
 import { Stat } from "@/app/components/stat";
 import { ArrowTrendingUpIcon, ServerIcon, UserIcon } from "@heroicons/react/16/solid";
 import { ReactElement } from "react";
-import useWebSocket from "react-use-websocket";
+import useWebSocket, { ReadyState } from "react-use-websocket";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 type Stat = {
@@ -35,8 +35,9 @@ const stats: Stat[] = [
 ];
 
 export function Stats(): ReactElement {
-  const { lastMessage } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics");
-  const metrics = lastMessage !== null ? JSON.parse(lastMessage.data).metrics : undefined;
+  const { lastMessage, readyState } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics");
+  const metrics =
+    lastMessage !== null && readyState == ReadyState.OPEN ? JSON.parse(lastMessage.data).metrics : undefined;
 
   return (
     <div className="flex gap-2 flex-wrap justify-center">