style: clean up

src/app/components/header.tsx

@@ -12,7 +12,7 @@ export default async function Header() {
 
 	return (
 		<div className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-200 shadow-md max-lg:grid-cols-2 max-sm:grid-cols-1">
-			<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400 max-sm:text-center">
+			<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400 max-sm:text-center max-sm:col-span-3">
 				TomodachiShare
 			</Link>
 
@@ -20,7 +20,7 @@ export default async function Header() {
 				<SearchBar />
 			</div>
 
-			<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-sm:justify-center">
+			<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-sm:justify-center max-sm:col-span-3">
 				<li title="Random Mii">
 					<Link href={"/random"} className="pill button !p-0 h-full aspect-square">
 						<Icon icon="mdi:dice-3" fontSize={28} />

src/app/components/mii-list.tsx

@@ -123,7 +123,7 @@ export default async function MiiList({ searchParams, userId }: Props) {
 								<LikeButton likes={mii.likes} isLoggedIn={session?.user != null} />
 
 								{userId == null && (
-									<Link href={`/profile/${mii.user.id}`} className="text-sm text-right text-ellipsis">
+									<Link href={`/profile/${mii.user.id}`} className="text-sm text-right overflow-hidden text-ellipsis">
 										@{mii.user?.username}
 									</Link>
 								)}

src/app/components/search-bar.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@iconify/react";
 
 export default function SearchBar() {
 	return (
-		<div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-400/35 transition shadow-md">
+		<div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-400/50 transition shadow-md">
 			<input
 				type="text"
 				placeholder="Search..."

src/app/login/page.tsx

@@ -12,7 +12,7 @@ export default async function LoginPage() {
 	}
 
 	return (
-		<div className="flex flex-col">
+		<div>
 			<h1 className="text-3xl font-medium text-center">Welcome to TomodachiShare!</h1>
 			<h2 className="text-lg text-center">Choose your login method</h2>
 

src/app/mii/[slug]/page.tsx

@@ -28,10 +28,10 @@ export default async function ProfilePage({ params }: Props) {
 	});
 
 	return (
-		<div className="flex gap-2">
+		<div className="flex gap-2 max-sm:flex-col">
 			<img src="https://placehold.co/400x300" alt="mii" className="rounded-xl" />
 			<div className="flex flex-col gap-1 p-4">
-				<h1 className="text-5xl font-extrabold">{mii?.name}</h1>
+				<h1 className="text-5xl font-extrabold break-words">{mii?.name}</h1>
 				<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
 					{mii?.tags.map((tag) => (
 						<Link href={{ pathname: "/", query: { tags: tag } }} key={tag}>

src/app/profile/[slug]/page.tsx

@@ -21,18 +21,18 @@ export default async function ProfilePage({ params, searchParams }: Props) {
 
 	return (
 		<div>
-			<div className="flex gap-4">
+			<div className="flex gap-4 mb-2">
 				<Image
 					src={user?.image ?? "/missing.webp"}
 					alt="profile picture"
 					width={128}
 					height={128}
-					className="rounded-full border-2 border-amber-500 shadow"
+					className="aspect-square rounded-full border-2 border-amber-500 shadow"
 				/>
 
 				<div className="flex flex-col">
-					<h1 className="text-4xl font-extrabold">{user?.name}</h1>
+					<h1 className="text-4xl font-extrabold w-full break-words">{user?.name}</h1>
-					<h2 className="text-lg font-semibold">@{user?.username}</h2>
+					<h2 className="text-lg font-semibold break-words">@{user?.username}</h2>
 
 					<h4 className="mt-auto">
 						Liked <span className="font-bold">{likedMiis}</span> Miis