fix: build errors and responsiveness

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
+							{...(onChecked ? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) } : { readOnly: true })}
-								? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) }
-								: { readOnly: true })}
 						/>
 						<label htmlFor={gender} className="text-sm select-none">
 							{gender}

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);

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
+					className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto
-						flex items-center ${isVisible ? "opacity-100" : "opacity-0"}`}
+						 ${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">
+					<div className="w-max flex items-center">
-						{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
+						<div className="mr-8 flex flex-col gap-0.5">
-							const actualIndex = i + getExtraSlice().start;
+							{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
-							return (
+								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}
+									key={i + 8}
-									onClick={() => setColor(actualIndex)}
+									onClick={() => setColor(i + 8)}
-									className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "ring-2 z-10" : ""}`}
+									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">
+						<button type="button" onClick={close} className="h-full w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
-						{COLORS.slice(8, 108).map((c, i) => (
+							<Icon icon={"tabler:chevron-right"} className="text-4xl" />
-							<button
+						</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>
-						))}
 					</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>
 			)}
 		</>

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}

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 (