From 1e30bcad691d2871eaa62297142a197b946834b6 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Thu, 26 Mar 2026 17:33:54 +0000
Subject: [PATCH] fix: build errors and responsiveness

---
 src/components/mii/dating-preferences.tsx     |  6 +-
 src/components/mii/voice-viewer.tsx           |  2 +-
 .../submit-form/mii-editor/color-picker.tsx   | 72 +++++++++----------
 .../submit-form/mii-editor/index.tsx          |  2 +-
 .../submit-form/mii-editor/tabs/other.tsx     |  5 +-
 5 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/src/components/mii/dating-preferences.tsx b/src/components/mii/dating-preferences.tsx
index cb8f3ed..88a7b4b 100644
--- a/src/components/mii/dating-preferences.tsx
+++ b/src/components/mii/dating-preferences.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { ChangeEvent } from "react";
 import { MiiGender } from "@prisma/client";
 import { SwitchMiiInstructions } from "@/types";
@@ -22,9 +24,7 @@ export default function DatingPreferencesViewer({ data, onChecked }: Props) {
 							id={gender}
 							className="checkbox"
 							checked={data.includes(genderEnum)}
-							{...(typeof window !== "undefined" && onChecked
-								? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) }
-								: { readOnly: true })}
+							{...(onChecked ? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) } : { readOnly: true })}
 						/>
 						<label htmlFor={gender} className="text-sm select-none">
 							{gender}
diff --git a/src/components/mii/voice-viewer.tsx b/src/components/mii/voice-viewer.tsx
index c22a95e..c423fa8 100644
--- a/src/components/mii/voice-viewer.tsx
+++ b/src/components/mii/voice-viewer.tsx
@@ -26,7 +26,7 @@ export default function VoiceViewer({ data, onClick, onClickTone }: Props) {
 						min={0}
 						max={100}
 						step={1}
-						value={data[label as keyof typeof data]}
+						value={data[label as keyof typeof data] ?? 50}
 						disabled={!onClick}
 						onChange={(e) => {
 							if (onClick) onClick(e, label);
diff --git a/src/components/submit-form/mii-editor/color-picker.tsx b/src/components/submit-form/mii-editor/color-picker.tsx
index 6d853fc..d932a77 100644
--- a/src/components/submit-form/mii-editor/color-picker.tsx
+++ b/src/components/submit-form/mii-editor/color-picker.tsx
@@ -64,61 +64,59 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
 
 			{isOpen && (
 				<div
-					className={`absolute inset-0 z-10 w-full p-4 bg-orange-100 rounded-lg transition-transform duration-500
-						flex items-center ${isVisible ? "opacity-100" : "opacity-0"}`}
+					className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto
+						 ${isVisible ? "opacity-100" : "opacity-0"}`}
 					style={{
 						transition: isVisible
 							? "transform 500ms cubic-bezier(0.34, 1.28, 0.64, 1), opacity 300ms"
 							: "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms",
 					}}
 				>
-					<div className="mr-8 flex flex-col gap-0.5">
-						{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
-							const actualIndex = i + getExtraSlice().start;
-							return (
+					<div className="w-max flex items-center">
+						<div className="mr-8 flex flex-col gap-0.5">
+							{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
+								const actualIndex = i + getExtraSlice().start;
+								return (
+									<button
+										type="button"
+										key={actualIndex}
+										onClick={() => setColor(actualIndex)}
+										className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "ring-2 z-10" : ""}`}
+										style={{
+											backgroundColor: `#${c}`,
+											opacity: isVisible ? 1 : 0,
+											transform: isVisible ? "scale(1)" : "scale(0.7)",
+											transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
+											// stagger by column then row for a wave effect
+											transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
+										}}
+									></button>
+								);
+							})}
+						</div>
+
+						<div className="grid grid-cols-10 gap-0.5 overflow-x-auto">
+							{COLORS.slice(8, 108).map((c, i) => (
 								<button
 									type="button"
-									key={actualIndex}
-									onClick={() => setColor(actualIndex)}
-									className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "ring-2 z-10" : ""}`}
+									key={i + 8}
+									onClick={() => setColor(i + 8)}
+									className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i + 8 ? "ring-2 z-10" : ""}`}
 									style={{
 										backgroundColor: `#${c}`,
 										opacity: isVisible ? 1 : 0,
 										transform: isVisible ? "scale(1)" : "scale(0.7)",
 										transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
-										// stagger by column then row for a wave effect
 										transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
 									}}
 								></button>
-							);
-						})}
-					</div>
+							))}
+						</div>
 
-					<div className="grid grid-cols-10 gap-0.5 overflow-x-auto">
-						{COLORS.slice(8, 108).map((c, i) => (
-							<button
-								type="button"
-								key={i + 8}
-								onClick={() => setColor(i + 8)}
-								className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i + 8 ? "ring-2 z-10" : ""}`}
-								style={{
-									backgroundColor: `#${c}`,
-									opacity: isVisible ? 1 : 0,
-									transform: isVisible ? "scale(1)" : "scale(0.7)",
-									transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
-									transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
-								}}
-							></button>
-						))}
+						<button type="button" onClick={close} className="h-full w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
+							<Icon icon={"tabler:chevron-right"} className="text-4xl" />
+						</button>
 					</div>
-
-					<button
-						type="button"
-						onClick={close}
-						className="absolute h-full w-16 top-0 right-0 cursor-pointer transition-transform hover:scale-115 active:scale-90"
-					>
-						<Icon icon={"tabler:chevron-right"} className="text-4xl" />
-					</button>
 				</div>
 			)}
 		</>
diff --git a/src/components/submit-form/mii-editor/index.tsx b/src/components/submit-form/mii-editor/index.tsx
index e11331a..d1bf626 100644
--- a/src/components/submit-form/mii-editor/index.tsx
+++ b/src/components/submit-form/mii-editor/index.tsx
@@ -51,7 +51,7 @@ export default function MiiEditor({ instructions }: Props) {
 	return (
 		<>
 			<div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
-				<div className="h-9 flex flex-row sm:flex-col">
+				<div className="w-full flex flex-row sm:flex-col max-sm:max-h-9 sm:max-w-9">
 					{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
 						<button
 							key={t}
diff --git a/src/components/submit-form/mii-editor/tabs/other.tsx b/src/components/submit-form/mii-editor/tabs/other.tsx
index e06ef93..c5f634e 100644
--- a/src/components/submit-form/mii-editor/tabs/other.tsx
+++ b/src/components/submit-form/mii-editor/tabs/other.tsx
@@ -34,7 +34,10 @@ export default function OtherTab({ instructions }: Props) {
 			return copy;
 		});
 
-		instructions.current.other[currentTab.name].color = value;
+		const target = instructions.current.other[currentTab.name];
+		if ("color" in target) {
+			target.color = value;
+		}
 	};
 
 	return (