feat: widget column span resizing with visual size picker

- Add per-widget colSpan stored in config JSON (no DB migration)
- Replace hardcoded full-width types with configurable span
- Add visual size picker popover in edit mode overlay
- Merge widget config updates for temp widgets in Board changeset

src/lib/components/widget/WidgetEditOverlay.svelte

@@ -5,27 +5,39 @@
 
 	interface Props {
 		widgetId: string;
+		colSpan?: number;
+		maxCols?: number;
 		onEdit: (widgetId: string) => void;
 		onDelete: (widgetId: string) => void;
+		onResize?: (widgetId: string, delta: number) => void;
 		children: Snippet;
 	}
 
-	let { widgetId, onEdit, onDelete, children }: Props = $props();
+	let { widgetId, colSpan = 1, maxCols = 4, onEdit, onDelete, onResize, children }: Props = $props();
 
 	let showDeleteConfirm = $state(false);
 	let hovered = $state(false);
+	let showSizePicker = $state(false);
+	let previewSpan = $state<number | null>(null);
 
 	function handleDelete() {
 		onDelete(widgetId);
 		showDeleteConfirm = false;
 	}
+
+	function handleSpanSelect(span: number) {
+		if (!onResize) return;
+		const delta = span - colSpan;
+		if (delta !== 0) onResize(widgetId, delta);
+		showSizePicker = false;
+	}
 </script>
 
 <div
 	class="group relative"
 	role="group"
 	onmouseenter={() => { hovered = true; }}
-	onmouseleave={() => { hovered = false; }}
+	onmouseleave={() => { hovered = false; showSizePicker = false; previewSpan = null; }}
 >
 	{@render children()}
 
@@ -43,8 +55,25 @@
 				</div>
 			</div>
 
-			<!-- Top-right: edit + delete -->
+			<!-- Top-right: resize + edit + delete -->
 			<div class="absolute right-1.5 top-1.5 flex items-center gap-1">
+				<!-- Resize button -->
+				{#if onResize}
+					<button
+						type="button"
+						onclick={() => { showSizePicker = !showSizePicker; previewSpan = null; }}
+						class="rounded-md bg-card/90 p-1.5 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors
+							{showSizePicker ? 'bg-primary text-primary-foreground' : 'hover:bg-accent hover:text-foreground'}"
+						title={$t('widget.resize') ?? 'Resize'}
+					>
+						<!-- Columns icon -->
+						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<rect x="3" y="3" width="18" height="18" rx="2" />
+							<path d="M9 3v18" /><path d="M15 3v18" />
+						</svg>
+					</button>
+				{/if}
+
 				<!-- Edit button -->
 				<button
 					type="button"
@@ -71,6 +100,48 @@
 					</svg>
 				</button>
 			</div>
+
+			<!-- Size picker popover -->
+			{#if showSizePicker && onResize}
+				<div class="absolute right-1.5 top-10 z-20 rounded-lg border border-border bg-card p-2 shadow-xl backdrop-blur-sm">
+					<div class="mb-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+						{$t('widget.width') ?? 'Width'}
+					</div>
+					<div class="flex flex-col gap-1">
+						{#each Array.from({ length: maxCols }, (_, i) => i + 1) as span}
+							{@const isActive = span === colSpan}
+							{@const isPreview = span === previewSpan}
+							<button
+								type="button"
+								onclick={() => handleSpanSelect(span)}
+								onmouseenter={() => { previewSpan = span; }}
+								onmouseleave={() => { previewSpan = null; }}
+								class="flex items-center gap-2 rounded-md px-2 py-1 text-left transition-colors
+									{isActive
+										? 'bg-primary/15 text-primary ring-1 ring-primary/30'
+										: isPreview
+											? 'bg-accent text-foreground'
+											: 'text-foreground hover:bg-accent'}"
+							>
+								<!-- Visual block representation -->
+								<div class="flex gap-px">
+									{#each Array(maxCols) as _, ci}
+										<div
+											class="h-2.5 w-3 rounded-[2px] transition-colors
+												{ci < span
+													? isActive ? 'bg-primary' : 'bg-foreground/50'
+													: 'bg-border'}"
+										></div>
+									{/each}
+								</div>
+								<span class="text-xs tabular-nums">
+									{span === maxCols ? ($t('widget.full_width') ?? 'Full') : `${span}/${maxCols}`}
+								</span>
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>