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
-								? { 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}

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,14 +64,15 @@ 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="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;
@@ -112,14 +113,11 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
 							))}
 						</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"
-					>
+						<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>
+				</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 (