Revert: drag ghost back to small badge style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/calendar/BookingCalendar.tsx

@@ -753,26 +753,17 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
       )}
 
       {/* Drag ghost element */}
-      {movingBooking && ghostPos && (() => {
+      {movingBooking && ghostPos && (
-        const nights = differenceInDays(parseISO(movingBooking.checkOut), parseISO(movingBooking.checkIn))
+        <div
-        const ghostWidth = Math.max(80, Math.min(nights * CELL_WIDTH - 4, 320))
+          className={cn(
-        return (
+            'fixed z-[9999] pointer-events-none px-3 py-1.5 rounded-lg text-white text-xs font-semibold shadow-xl border-2 border-white/40',
-          <div
+            BOOKING_STATUS_COLORS[movingBooking.status],
-            className={cn(
+          )}
-              'fixed z-[9999] pointer-events-none flex items-center px-2 rounded-md text-white text-xs font-semibold shadow-2xl border-l-4 opacity-90',
+          style={{ left: ghostPos.x + 14, top: ghostPos.y - 16 }}
-              BOOKING_STATUS_COLORS[movingBooking.status],
+        >
-            )}
+          {movingBooking.guestName}
-            style={{
+        </div>
-              left: ghostPos.x - ghostWidth / 2,
+      )}
-              top: ghostPos.y - ROW_HEIGHT / 2 + 4,
-              width: ghostWidth,
-              height: ROW_HEIGHT - 8,
-            }}
-          >
-            <span className="truncate drop-shadow-sm">{movingBooking.guestName}</span>
-          </div>
-        )
-      })()}
 
       {/* Rental booking modal */}
       {rentalModal && (