From 954b204bac69492cfa663c15f92c6016bc03fb88 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 24 Mar 2026 11:49:12 +0100
Subject: [PATCH] fix(manacore): fix dashboard grid layout - widgets were
 col-span-1

The animate:flip wrapper div in DashboardGrid was not passing through
the col-span classes, causing all widgets to render at minimum width.
Moved size classes from WidgetContainer to the grid wrapper div.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../web/src/lib/components/dashboard/DashboardGrid.svelte    | 3 ++-
 .../web/src/lib/components/dashboard/WidgetContainer.svelte  | 5 ++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/dashboard/DashboardGrid.svelte b/apps/manacore/apps/web/src/lib/components/dashboard/DashboardGrid.svelte
index 6bc176d2a..af0bb9809 100644
--- a/apps/manacore/apps/web/src/lib/components/dashboard/DashboardGrid.svelte
+++ b/apps/manacore/apps/web/src/lib/components/dashboard/DashboardGrid.svelte
@@ -8,6 +8,7 @@
 	import { dndzone, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import type { WidgetConfig } from '$lib/types/dashboard';
+	import { WIDGET_SIZE_CLASSES } from '$lib/types/dashboard';
 	import { dashboardStore } from '$lib/stores/dashboard.svelte';
 	import WidgetContainer from './WidgetContainer.svelte';
 
@@ -44,7 +45,7 @@
 	onfinalize={handleFinalize}
 >
 	{#each items as widget (widget.id)}
-		<div animate:flip={{ duration: flipDurationMs }}>
+		<div class={WIDGET_SIZE_CLASSES[widget.size]} animate:flip={{ duration: flipDurationMs }}>
 			<WidgetContainer {widget} />
 		</div>
 	{/each}
diff --git a/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte b/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte
index 097c3fb23..d9c1374e0 100644
--- a/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte
+++ b/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte
@@ -9,7 +9,7 @@
 	import { _ } from 'svelte-i18n';
 	import { Card } from '@manacore/shared-ui';
 	import type { WidgetConfig, WidgetSize } from '$lib/types/dashboard';
-	import { WIDGET_SIZE_CLASSES, getWidgetMeta } from '$lib/types/dashboard';
+	import { getWidgetMeta } from '$lib/types/dashboard';
 	import { dashboardStore } from '$lib/stores/dashboard.svelte';
 
 	// Widget components
@@ -37,7 +37,6 @@
 	let { widget }: Props = $props();
 
 	const meta = $derived(getWidgetMeta(widget.type));
-	const sizeClasses = $derived(WIDGET_SIZE_CLASSES[widget.size]);
 
 	const sizes: WidgetSize[] = ['small', 'medium', 'large', 'full'];
 	const sizeLabels: Record<WidgetSize, string> = {
@@ -78,7 +77,7 @@
 	const WidgetComponent = $derived(widgetComponents[widget.type]);
 </script>
 
-<div class={sizeClasses}>
+<div>
 	<Card class="relative h-full">
 		<!-- Edit Mode Overlay -->
 		{#if dashboardStore.isEditing}