From 14c992a9cef5a5c56de39152ae71591560065ad3 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Mon, 6 Apr 2026 14:22:10 +0100
Subject: [PATCH] feat: clearer selected personalities

---
 src/components/mii/instructions.tsx       | 10 +++++-----
 src/components/mii/personality-viewer.tsx |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/mii/instructions.tsx b/src/components/mii/instructions.tsx
index 5a3fd95..c307ccf 100644
--- a/src/components/mii/instructions.tsx
+++ b/src/components/mii/instructions.tsx
@@ -41,7 +41,7 @@ function ColorPosition({ color }: { color: number }) {
 	if (color <= 7) {
 		return (
 			<span className="flex items-center">
-				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+				<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 				Color menu on left, <GridPosition index={color} cols={1} />
 			</span>
 		);
@@ -49,7 +49,7 @@ function ColorPosition({ color }: { color: number }) {
 	if (color >= 108) {
 		return (
 			<span className="flex items-center">
-				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+				<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 				Outside color menu, <GridPosition index={color - 108} cols={2} />
 			</span>
 		);
@@ -57,7 +57,7 @@ function ColorPosition({ color }: { color: number }) {
 
 	return (
 		<span className="flex items-center">
-			<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+			<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 			Color menu on right, <GridPosition index={color - 8} cols={10} />
 		</span>
 	);
@@ -88,7 +88,7 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
 	const stretch = "stretch" in instructions ? instructions.stretch : undefined;
 
 	return (
-		<div className={`p-3 ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
+		<div className={`p-3 w-max ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
 			<h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3>
 
 			<table className="w-full">
@@ -196,7 +196,7 @@ export default function MiiInstructions({ instructions }: Props) {
 			)}
 
 			{(height || weight || datingPreferences || voice || personality) && (
-				<div className="pl-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950">
+				<div className="p-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950 w-max">
 					<h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3>
 
 					{height && (
diff --git a/src/components/mii/personality-viewer.tsx b/src/components/mii/personality-viewer.tsx
index c2b969d..1d58515 100644
--- a/src/components/mii/personality-viewer.tsx
+++ b/src/components/mii/personality-viewer.tsx
@@ -22,7 +22,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
 				const key = label.toLowerCase() as keyof typeof data;
 				return (
 					<div key={label} className="flex justify-center items-center gap-2">
-						<span className="text-sm font-semibold w-24 shrink-0">{label}</span>
+						<span className="text-sm w-24 shrink-0">{label}</span>
 						<span className="text-sm text-zinc-500 w-14 text-right">{left}</span>
 						<div className="flex gap-0.5">
 							{Array.from({ length: 8 }).map((_, i) => {
@@ -43,7 +43,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
 										onClick={() => {
 											if (onClick) onClick(key, i);
 										}}
-										className={`size-7 rounded-lg transition-opacity duration-100 border-orange-500
+										className={`size-7 rounded-lg transition-opacity duration-100 border-black/40
                   ${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`}
 									></button>
 								);