fix motd on mobile and format the player counts

src/app/(pages)/player/[id]/page.tsx

@@ -57,8 +57,8 @@ export default async function Page({ params }: Params): Promise<JSX.Element> {
       <Card>
         {player == null && <NotFound message="Invalid UUID / Username" />}
         {player != null && (
-          <div className="flex gap-4 flex-col md:flex-row">
+          <div className="flex gap-4 flex-col xs:flex-row">
-            <div className="flex justify-center md:justify-start">
+            <div className="flex justify-center xs:justify-start">
               <Image
                 className="w-[96px] h-[96px]"
                 src={player.skin.parts.head}

src/app/(pages)/server/[platform]/[hostname]/page.tsx

@@ -2,6 +2,7 @@ import { Card } from "@/app/components/card";
 import { NotFound } from "@/app/components/not-found";
 import { LookupServer } from "@/app/components/server/lookup-server";
 import { generateEmbed } from "@/common/embed";
+import { formatNumber } from "@/common/number-utils";
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import { getServer } from "mcutils-library";
 import JavaMinecraftServer from "mcutils-library/dist/types/server/javaServer";
@@ -78,9 +79,9 @@ export default async function Page({ params: { platform, hostname } }: Params):
         {server == null && <NotFound message="Server not responding" />}
         {server != null && (
           <div className="flex gap-4 flex-col">
-            <div className="flex gap-4 flex-col md:flex-row">
+            <div className="flex gap-4 flex-col xs:flex-row">
               {favicon && (
-                <div className="flex justify-center md:justify-start">
+                <div className="flex justify-center xs:justify-start">
                   <Image
                     className="w-[64px] h-[64px]"
                     src={favicon}
@@ -96,13 +97,13 @@ export default async function Page({ params: { platform, hostname } }: Params):
                 <h2 className="text-xl">{server.hostname}</h2>
                 <div className="text-primary">
                   <p>
-                    Players online: {server.players.online}/{server.players.max}
+                    Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
                   </p>
                 </div>
               </div>
             </div>
 
-            <div className="bg-background rounded-lg p-2">
+            <div className="bg-background rounded-lg p-2 text-sm xs:text-md">
               {server.motd.html.map((line, index) => {
                 return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
               })}

src/app/components/container.tsx

@@ -6,7 +6,7 @@ export default function Container({
   children: React.ReactNode;
 }>): JSX.Element {
   return (
-    <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
+    <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 xs:max-w-[1200px]">
       <NavBar />
       <div className="w-full flex-1 p-4">{children}</div>
     </div>

src/app/components/navbar.tsx

@@ -18,7 +18,7 @@ export default function NavBar(): JSX.Element {
     <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
       <div className="flex items-center gap-2 pl-3 pr-3">
         <Logo />
-        <Link href="/" className="hidden md:block">
+        <Link href="/" className="hidden xs:block">
           <p>Minecraft Utilities</p>
         </Link>
       </div>
@@ -29,7 +29,7 @@ export default function NavBar(): JSX.Element {
       <div className="flex-grow"></div>
 
       <div className="mr-4 flex items-center gap-2">
-        <div className="hidden md:block">
+        <div className="hidden xs:block">
           <RedirectButton
             title="Star us on Github!"
             url="https://github.com/RealFascinated/minecraft-helper"

src/app/components/player/lookup-player.tsx

@@ -30,7 +30,7 @@ export function LookupPlayer(): JSX.Element {
 
   return (
     <form className="flex gap-2 justify-center mt-2">
-      <Input className="w-fit" placeholder="UUID / Username" value={player} onChange={setPlayerValue} />
+      <Input className="w-fit" placeholder="UUID / Username" value={player} onChange={setPlayerValue} maxLength={36} />
       <Button type="submit" onClick={() => lookupPlayer()}>
         Lookup
       </Button>

src/app/components/server/lookup-server.tsx

@@ -32,10 +32,12 @@ export function LookupServer(): JSX.Element {
   };
 
   return (
-    <form className="flex gap-2 justify-center mt-2">
+    <form className="flex gap-2 justify-center items-center mt-2 flex-col xs:flex-row">
-      <Input className="w-fit" placeholder="Hostname" value={hostname} onChange={setHostnameValue} />
+      <Input className="w-fit" placeholder="Hostname" value={hostname} onChange={setHostnameValue} maxLength={128} />
+      <div className="flex gap-2 justify-center">
         <Button onClick={() => lookupServer(ServerPlatform.Java)}>Java</Button>
         <Button onClick={() => lookupServer(ServerPlatform.Bedrock)}>Bedrock</Button>
+      </div>
     </form>
   );
 }

src/common/number-utils.ts

@@ -0,0 +1,9 @@
+/**
+ * Formats a number using the browser's locale
+ *
+ * @param number the number to format
+ * @returns the formatted number
+ */
+export function formatNumber(number: number): string {
+  return new Intl.NumberFormat().format(number);
+}

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
 
 const config = {
   darkMode: ["class"],
@@ -9,10 +10,14 @@ const config = {
       center: true,
       padding: "2rem",
       screens: {
-        "2xl": "1400px",
+        xs: "475px",
+        ...defaultTheme.screens,
       },
     },
     extend: {
+      screens: {
+        xs: "475px",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",