From 7ef9cb4326181b8b6f7e37ee0c2c08603dc9e5e8 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 19 Mar 2026 18:03:49 +0300
Subject: [PATCH] Fix icon picker grid: use inline grid styles for reliable
 8-column layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/IconPicker.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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>