Update src

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

@@ -14,9 +14,16 @@ import { CachedPlayer, getPlayer, type RestfulMCAPIError } from "restfulmc-lib";
 const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
 	let error: string | undefined = undefined; // The error to display
 	let result: CachedPlayer | undefined = undefined; // The player to display
-	const query: string | undefined = params.slug; // The query to search for
+	let query: string | undefined = params.slug?.[0]; // The query to search for
+
+	// Limit the query to 36 chars
+	if (query && query.length > 36) {
+		query = query.substr(0, 36);
+	}
+
+	// Try and get the player to display
 	try {
-		result = params.slug ? await getPlayer(query) : undefined; // Get the player to display
+		result = params.slug ? await getPlayer(query) : undefined;
 	} catch (err) {
 		error = (err as RestfulMCAPIError).message; // Set the error message
 	}

Frontend/src/app/components/player/player-search.tsx

@@ -23,7 +23,12 @@ const PlayerSearch = ({
 			className="flex flex-col gap-7 justify-center items-center"
 			action={handleRedirect}
 		>
-			<Input name="query" placeholder="Username / UUID" defaultValue={query} />
+			<Input
+				name="query"
+				placeholder="Username / UUID"
+				defaultValue={query}
+				maxLength={36}
+			/>
 			<MinecraftButton type="submit">Search</MinecraftButton>
 		</form>
 	);

Frontend/tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-const { fontFamily } = require("tailwindcss/defaultTheme");
+const { fontFamily, screens } = require("tailwindcss/defaultTheme");
 
 const config = {
 	darkMode: ["class"],
@@ -75,6 +75,10 @@ const config = {
 				"accordion-up": "accordion-up 0.2s ease-out",
 			},
 		},
+		screens: {
+			xs: "475px",
+			...screens,
+		},
 	},
 	plugins: [require("tailwindcss-animate")],
 } satisfies Config;