zenno: allow styling CharaPick

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>

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>