From 773625b84229bfec7f9f3da3d07eaffac6ea8b80 Mon Sep 17 00:00:00 2001
From: Branden J Brown <zephyrtronium@gmail.com>
Date: Tue, 31 Mar 2026 12:31:37 -0400
Subject: [PATCH] zenno: allow styling CharaPick

---
 zenno/src/lib/CharaPick.svelte      | 23 ++++++++++++++++++-----
 zenno/src/routes/convo/+page.svelte |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/zenno/src/lib/CharaPick.svelte b/zenno/src/lib/CharaPick.svelte
index 77739f1..27ca238 100644
--- a/zenno/src/lib/CharaPick.svelte
+++ b/zenno/src/lib/CharaPick.svelte
@@ -1,25 +1,38 @@
 <script lang="ts">
 	import { character } from '$lib/data/character';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props {
 		id: string;
 		value: number;
 		label?: string;
+		class?: ClassValue | null;
+		optionClass?: ClassValue | null;
+		labelClass?: ClassValue | null;
 		region?: keyof typeof character;
 		required?: boolean;
 	}
 
-	let { id, value = $bindable(), label, region = 'global', required = false }: Props = $props();
+	let {
+		id,
+		value = $bindable(),
+		label,
+		class: className,
+		optionClass,
+		labelClass,
+		region = 'global',
+		required = false,
+	}: Props = $props();
 </script>
 
 {#if label}
-	<label for={id}>{label}</label>
+	<label for={id} class={labelClass}>{label}</label>
 {/if}
-<select {id} bind:value {required}>
+<select {id} class={className} bind:value {required}>
 	{#if !required}
-		<option value="0"></option>
+		<option value="0" class={optionClass}></option>
 	{/if}
 	{#each character[region] as c}
-		<option value={c.chara_id}>{c.name}</option>
+		<option value={c.chara_id} class={optionClass}>{c.name}</option>
 	{/each}
 </select>
diff --git a/zenno/src/routes/convo/+page.svelte b/zenno/src/routes/convo/+page.svelte
index b5bbaf3..8f88f6d 100644
--- a/zenno/src/routes/convo/+page.svelte
+++ b/zenno/src/routes/convo/+page.svelte
@@ -26,7 +26,7 @@
 <h1>Lobby Conversations</h1>
 <div class="mt-8 flex text-center">
 	<div class="flex-1">
-		<CharaPick id="chara" label="Character" bind:value={charaID} required />
+		<CharaPick id="chara" class="w-full" label="Character" bind:value={charaID} required />
 	</div>
 	<div class="flex-1">
 		<label for="convo">Conversation</label>