fix mobile support on the new forms
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s

This commit is contained in:
Lee 2024-04-18 05:48:13 +01:00
parent 269653ed55
commit ea98b2bd5a
3 changed files with 6 additions and 5 deletions

@ -40,7 +40,7 @@ export function LookupPlayer(): ReactElement {
return ( return (
<form <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) => { action={(form: FormData) => {
lookupPlayer(form.get("query") as string); lookupPlayer(form.get("query") as string);
}} }}

@ -51,7 +51,7 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme
lookupServer(form.get("platform") as ServerPlatform, form.get("query") as string); 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"> <div className="flex flex-col gap-2 items-start">
<Label htmlFor="platform">Platform</Label> <Label htmlFor="platform">Platform</Label>
<Select name="platform" defaultValue={currentPlatform}> <Select name="platform" defaultValue={currentPlatform}>

@ -3,7 +3,7 @@
import { Stat } from "@/app/components/stat"; import { Stat } from "@/app/components/stat";
import { ArrowTrendingUpIcon, ServerIcon, UserIcon } from "@heroicons/react/16/solid"; import { ArrowTrendingUpIcon, ServerIcon, UserIcon } from "@heroicons/react/16/solid";
import { ReactElement } from "react"; import { ReactElement } from "react";
import useWebSocket from "react-use-websocket"; import useWebSocket, { ReadyState } from "react-use-websocket";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
type Stat = { type Stat = {
@ -35,8 +35,9 @@ const stats: Stat[] = [
]; ];
export function Stats(): ReactElement { export function Stats(): ReactElement {
const { lastMessage } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics"); const { lastMessage, readyState } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics");
const metrics = lastMessage !== null ? JSON.parse(lastMessage.data).metrics : undefined; const metrics =
lastMessage !== null && readyState == ReadyState.OPEN ? JSON.parse(lastMessage.data).metrics : undefined;
return ( return (
<div className="flex gap-2 flex-wrap justify-center"> <div className="flex gap-2 flex-wrap justify-center">