feat(dashboard): combine vertical + horizontal compaction for gap-free widget layout

2026-04-09 20:42:49 +02:00
parent 4eac7b1888
commit 446aea5319
1 changed files with 12 additions and 2 deletions
@@ -1,7 +1,17 @@
 "use client";

 import type { DashboardWidgetConfig, DashboardWidgetType } from "@capakraken/shared/types";
-import { verticalCompactor } from "react-grid-layout";
+import { verticalCompactor, horizontalCompactor, type Compactor } from "react-grid-layout";
+
+// Runs vertical compaction first (float up), then horizontal (float left).
+const bothCompactor: Compactor = {
+  type: "vertical",
+  allowOverlap: false,
+  compact(layout, cols) {
+    const afterVertical = verticalCompactor.compact(layout, cols);
+    return horizontalCompactor.compact(afterVertical, cols);
+  },
+};
 import dynamic from "next/dynamic";
 import { Suspense, useState, useRef, useEffect, useMemo } from "react";
 import { useDashboardLayout } from "~/hooks/useDashboardLayout.js";
@@ -313,7 +323,7 @@ export function DashboardClient() {
                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
                cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
                rowHeight={80}
-                compactor={verticalCompactor}
+                compactor={bothCompactor}
                onLayoutChange={(
                  _: unknown,
                  allLayouts: Record<