From bc7460bd718233a0b70ba86f7052a472a46436ee Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sun, 30 Mar 2025 21:47:34 +0100
Subject: [PATCH] style: clean up

---
 src/app/components/header.tsx     | 4 ++--
 src/app/components/mii-list.tsx   | 2 +-
 src/app/components/search-bar.tsx | 2 +-
 src/app/login/page.tsx            | 2 +-
 src/app/mii/[slug]/page.tsx       | 4 ++--
 src/app/profile/[slug]/page.tsx   | 8 ++++----
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index 1dc08a1..1e4b93c 100644
--- a/src/app/components/header.tsx
+++ b/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} />
diff --git a/src/app/components/mii-list.tsx b/src/app/components/mii-list.tsx
index 5f3d8dc..b8afb20 100644
--- a/src/app/components/mii-list.tsx
+++ b/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>
 								)}
diff --git a/src/app/components/search-bar.tsx b/src/app/components/search-bar.tsx
index 6948006..6ad320c 100644
--- a/src/app/components/search-bar.tsx
+++ b/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..."
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index d4c6246..534a14a 100644
--- a/src/app/login/page.tsx
+++ b/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>
 
diff --git a/src/app/mii/[slug]/page.tsx b/src/app/mii/[slug]/page.tsx
index 5030a9a..852e12c 100644
--- a/src/app/mii/[slug]/page.tsx
+++ b/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}>
diff --git a/src/app/profile/[slug]/page.tsx b/src/app/profile/[slug]/page.tsx
index f7051fb..0a354d9 100644
--- a/src/app/profile/[slug]/page.tsx
+++ b/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>
-					<h2 className="text-lg font-semibold">@{user?.username}</h2>
+					<h1 className="text-4xl font-extrabold w-full break-words">{user?.name}</h1>
+					<h2 className="text-lg font-semibold break-words">@{user?.username}</h2>
 
 					<h4 className="mt-auto">
 						Liked <span className="font-bold">{likedMiis}</span> Miis