diff --git a/src/components/calendar/BookingCalendar.tsx b/src/components/calendar/BookingCalendar.tsx
index e4a750a..4ce7583 100644
--- a/src/components/calendar/BookingCalendar.tsx
+++ b/src/components/calendar/BookingCalendar.tsx
@@ -753,26 +753,17 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
       )}
 
       {/* Drag ghost element */}
-      {movingBooking && ghostPos && (() => {
-        const nights = differenceInDays(parseISO(movingBooking.checkOut), parseISO(movingBooking.checkIn))
-        const ghostWidth = Math.max(80, Math.min(nights * CELL_WIDTH - 4, 320))
-        return (
-          <div
-            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',
-              BOOKING_STATUS_COLORS[movingBooking.status],
-            )}
-            style={{
-              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>
-        )
-      })()}
+      {movingBooking && ghostPos && (
+        <div
+          className={cn(
+            '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',
+            BOOKING_STATUS_COLORS[movingBooking.status],
+          )}
+          style={{ left: ghostPos.x + 14, top: ghostPos.y - 16 }}
+        >
+          {movingBooking.guestName}
+        </div>
+      )}
 
       {/* Rental booking modal */}
       {rentalModal && (