Positioning, sizing and sorting of the gadgets improved.

frontend/src/components/today/TodayDashboardGrid.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useMemo, type CSSProperties } from 'react';
+import {
+  packDashboardCells,
+  packedCellClassName,
+  TODAY_DASHBOARD_GRID_CLASS,
+  type TodayDashboardCell,
+} from '@/components/today/today-dashboard-layout';
+
+interface TodayDashboardGridProps {
+  cells: TodayDashboardCell[];
+  loading?: boolean;
+}
+
+export function TodayDashboardGrid({ cells, loading = false }: TodayDashboardGridProps) {
+  const packed = useMemo(() => packDashboardCells(cells), [cells]);
+
+  if (packed.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`${TODAY_DASHBOARD_GRID_CLASS} ${loading ? 'opacity-70 transition-opacity' : ''}`}
+      style={{ gridAutoRows: 'var(--today-grid-unit, 5.75rem)' }}
+    >
+      {packed.map((cell) => (
+        <div
+          key={cell.id}
+          className={`today-dashboard-cell ${packedCellClassName(cell.layout)}`}
+          style={
+            {
+              '--today-gc': cell.gridColumn,
+              '--today-gr': cell.gridRow,
+            } as CSSProperties
+          }
+        >
+          <div className="flex h-full min-h-0 flex-1 flex-col">{cell.content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}