Bug: Anime overlay cursor does not change to grab/move cursor in some areas

[CoderKavyaG]

Description

When dragging anime overlays on the canvas, the cursor sometimes does not change to the grab/move cursor. This makes it unclear to users whether they can interact with the overlay.

Steps to Reproduce

1. Add an image to the canvas
2. Go to Overlays tab and add anime overlay characters
3. Click on one of the anime overlays to select it
4. Try to drag the overlay by clicking and dragging from different parts of the bounding box
5. Notice that when hovering over certain areas (especially near edges or transparent areas), the cursor does not change from default pointer to grab cursor

Current Behavior

• Cursor remains as default pointer in certain areas
• Some areas within the overlay bounding box don't trigger the grab cursor

Expected Behavior

• The cursor should consistently show the grab cursor when hovering over any draggable overlay
• When actively dragging, the cursor should show the grabbing cursor

Root Cause

The issue is in components/overlays/overlay-renderer.tsx. The parent container div has cursor-grab class, but the child img element has object-contain CSS which doesn't fill the entire container. Areas outside the visible image content within the bounding box don't properly display the grab cursor.

Affected File

components/overlays/overlay-renderer.tsx - Line with: className="absolute pointer-events-auto cursor-grab active:cursor-grabbing"

Suggested Fix

1. Apply cursor styles to an overlay wrapper that covers the entire clickable area
2. Ensure the image container fills the entire parent bounds
3. Consider pointer-events: none on img, with pointer-events: auto on container

Impact

• Affects UX when repositioning overlays
• Users may not realize certain areas are draggable

[CoderKavyaG]

hey @KartikLabhshetwar if its not being worked on i would love to contribute and love to get this assigned