diff --git a/apps/web/src/components/dashboard/DashboardClient.tsx b/apps/web/src/components/dashboard/DashboardClient.tsx
index 38e8a0a..af0b07f 100644
--- a/apps/web/src/components/dashboard/DashboardClient.tsx
+++ b/apps/web/src/components/dashboard/DashboardClient.tsx
@@ -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<