Skip to content

[Bug] File drag-and-drop to chat panel doesn't show overlay - missing CSS position: relative #925

@stars-bababoyi

Description

@stars-bababoyi

Bug Description

Dragging files from the Explorer to the Chat panel doesn't show the blue drop overlay, and users cannot visually confirm that drag-and-drop is working. The files may or may not be added to the chat context, but there's no visual feedback.

Steps to Reproduce

  1. Open Void IDE
  2. Open a project folder
  3. Open the Chat panel (Ctrl+L)
  4. Drag a file from the Explorer to the chat input area
  5. Expected: Blue overlay appears with "Attach [file] as Context" text
  6. Actual: No overlay appears, no visual feedback

Root Cause Analysis

After investigating the source code, I found the issue in src/vs/workbench/contrib/chat/browser/media/chat.css:

The .chat-dnd-overlay element uses position: absolute (lines 545-560):

.interactive-session .chat-dnd-overlay {
    position: absolute;
    top: 0;
    left: 0;
    /* ... */
}

However, its parent .interactive-session (lines 6-9) is missing position: relative:

.interactive-session {
    max-width: 850px;
    margin: auto;
    /* Missing: position: relative */
}

Without position: relative on the parent, the absolutely positioned overlay is positioned relative to a wrong ancestor element, causing it to appear off-screen or in an incorrect location.

Proposed Fix

Add position: relative to .interactive-session:

.interactive-session {
    max-width: 850px;
    margin: auto;
    position: relative; /* Fix: provide positioning context for chat-dnd-overlay */
}

This is a one-line fix that ensures the drag-and-drop overlay is correctly positioned within the chat session container.

Environment

  • Void Version: 1.4.x (also affects all branches including main, mcp, last-working-1.2.5)
  • OS: Windows 11
  • Verified in source code: All branches have this issue

Additional Context

  • The drag events (dragover, drop) are firing correctly
  • The .chat-dnd-overlay element exists in the DOM
  • The JavaScript logic in chatDragAndDrop.ts is working correctly
  • Only the CSS positioning is broken

I'm happy to submit a PR if the team confirms this is the correct fix.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions