Fix rack slot drag targets

client/src/components/rack/RackColumn.tsx

@@ -4,7 +4,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { Trash2, MapPin, GripVertical } from 'lucide-react';
 import { toast } from 'sonner';
 import type { Rack } from '../../types';
-import { buildOccupancyMap } from '../../lib/utils';
+import { U_HEIGHT_PX } from '../../lib/constants';
 import { ModuleBlock } from './ModuleBlock';
 import { RackSlot } from './RackSlot';
 import { ConfirmDialog } from '../ui/ConfirmDialog';
@@ -35,9 +35,6 @@ export function RackColumn({ rack, draggingModuleId, hoverSlot }: RackColumnProp
     opacity: isDragging ? 0.4 : 1,
   };
 
-  const occupancy = buildOccupancyMap(rack.modules);
-  const renderedModuleIds = new Set<string>();
-
   async function handleDelete() {
     setDeleting(true);
     try {
@@ -86,43 +83,32 @@ export function RackColumn({ rack, draggingModuleId, hoverSlot }: RackColumnProp
         </div>
 
         {/* U-slot body */}
-        <div className="border-x border-slate-600 bg-[#1e2433] flex flex-col">
+        <div
-          {Array.from({ length: rack.totalU }, (_, i) => i + 1).map((u) => {
+          className="relative border-x border-slate-600 bg-[#1e2433]"
-            const moduleId = occupancy.get(u) ?? null;
+          style={{ height: rack.totalU * U_HEIGHT_PX }}
-
+        >
-            if (moduleId) {
+          <div className="absolute inset-0 flex flex-col">
-              const module = rack.modules.find((m) => m.id === moduleId);
+            {Array.from({ length: rack.totalU }, (_, i) => i + 1).map((u) => (
-              if (!module) return null;
-
-              // Only render ModuleBlock at its top U
-              if (module.uPosition !== u) return null;
-              if (renderedModuleIds.has(moduleId)) return null;
-              renderedModuleIds.add(moduleId);
-
-              // If this module is being dragged, show empty ghost slot instead
-              if (moduleId === draggingModuleId) {
-                return (
-                  <RackSlot
-                    key={`ghost-${u}`}
-                    rackId={rack.id}
-                    uPosition={u}
-                    isOver={hoverSlot?.rackId === rack.id && hoverSlot?.uPosition === u}
-                  />
-                );
-              }
-
-              return <ModuleBlock key={module.id} module={module} />;
-            }
-
-            return (
               <RackSlot
                 key={u}
                 rackId={rack.id}
                 uPosition={u}
                 isOver={hoverSlot?.rackId === rack.id && hoverSlot?.uPosition === u}
               />
-            );
+            ))}
-          })}
+          </div>
+
+          {rack.modules
+            .filter((module) => module.id !== draggingModuleId)
+            .map((module) => (
+              <div
+                key={module.id}
+                className="absolute left-0 right-0 z-10"
+                style={{ top: (module.uPosition - 1) * U_HEIGHT_PX }}
+              >
+                <ModuleBlock module={module} />
+              </div>
+            ))}
         </div>
 
         {/* Rack footer */}