diff --git a/frontend/src/lib/components/IconPicker.svelte b/frontend/src/lib/components/IconPicker.svelte
index 9451d65..fb4dfae 100644
--- a/frontend/src/lib/components/IconPicker.svelte
+++ b/frontend/src/lib/components/IconPicker.svelte
@@ -69,10 +69,11 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;" onclick={() => { open = false; search = ''; }}></div>
 
-	<div style="{dropdownStyle}" class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-lg p-3 w-72">
+	<div style="{dropdownStyle} width: 20rem;"
+		class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-lg p-3">
 		<input type="text" bind:value={search} placeholder="Search icons..."
 			class="w-full px-2 py-1 mb-2 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
-		<div class="grid grid-cols-8 gap-1 max-h-48 overflow-y-auto">
+		<div style="display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; max-height: 14rem; overflow-y: auto;">
 			<button type="button" onclick={() => select('')}
 				class="flex items-center justify-center w-8 h-8 rounded hover:bg-[var(--color-muted)] text-xs text-[var(--color-muted-foreground)]"
 				title="No icon">✕</button>