Prevent upload button from overlaying textarea content

[Copilot]

Bug Fix

What was the bug?

The cloud-upload button in comment textareas was absolutely positioned inside the textarea (left: 6px; bottom: 8px), with a padding-bottom: 32px workaround meant to reserve space. Once the textarea scrolled, content rendered under the icon — overlaying the cursor and any text near the bottom-left.

How did you fix it?

Move the visual "input" chrome from the <textarea> onto .textarea-wrapper and reserve a strip at the bottom of the wrapper for the upload button. The textarea now physically occupies only the wrapper's content area, so text and the caret can never reach the button row, while the button still appears inside the textarea's visual border (one "line" below where typing stops).

• webviews/activityBarView/index.css and webviews/editorWebview/index.css:
  • .textarea-wrapper: holds the visual border, background, border-radius, and a :focus-within outline; adds padding-bottom: 28px to reserve the button area.
  • .textarea-wrapper textarea: borderless / transparent background / outline: none, fills the wrapper's content area only.
  • .comment-upload-button: position: absolute; left: 6px; bottom: 4px; inside the reserved bottom strip.
  • Removed the padding-bottom: 32px hack on the textarea (no longer needed).
• The other absolute child .title-action (top-right generate button) is unaffected — it remains absolutely positioned relative to the wrapper.

.textarea-wrapper {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--vscode-dropdown-border);
    background-color: var(--vscode-input-background);
    border-radius: 4px;
    padding-bottom: 28px;
}

.textarea-wrapper:focus-within {
    outline: 1px solid var(--vscode-focusBorder);
}

.textarea-wrapper textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    border-radius: 0;
    outline: none;
}

.textarea-wrapper .comment-upload-button {
    position: absolute;
    left: 6px;
    bottom: 4px;
    /* …unchanged visual styles… */
}

Testing

Manually verify in both the activity bar comment form and the editor webview comment/edit forms that:

• The upload button sits inside the textarea's visual border at the bottom-left and never overlaps text or the caret, including when the textarea is scrolled. Text/cursor stops one line above the button row.
• The textarea border/background and focus outline render correctly (focus highlights the wrapper).
• The top-right title-action (generate) button still renders in place.

[alexr00]

@copilot I still want it "in" the text area, but I want text/cursor to not go in that "line" of the text area, and to stop one "line" earlier.

[Copilot]

@copilot I still want it "in" the text area, but I want text/cursor to not go in that "line" of the text area, and to stop one "line" earlier.

Reworked it: the input border/background now lives on .textarea-wrapper (with a :focus-within outline), and the wrapper has a 28px padding-bottom that reserves the bottom row for the upload button. The <textarea> itself fills the wrapper's content area only, so text and the caret physically can't reach the button row — the upload button still appears inside the textarea visually, just one "line" below where typing stops.

[Copilot]

Pull request overview

Adjusts webview comment textarea styling so the upload button no longer overlays scrolled content, by moving the “input chrome” to the wrapper and reserving a dedicated button strip. Also updates a proposed VS Code type definition to add a workingDirectory option for language model tool invocation metadata.

Changes:

• Reworks .textarea-wrapper / textarea styling in editor and activity bar webviews to prevent the upload button from covering text/caret while scrolling.
• Tweaks upload button positioning (bottom: 4px) to align with the newly reserved strip.
• Adds workingDirectory?: Uri to proposed chat participant tool invocation option types.

Show a summary per file

File	Description
webviews/editorWebview/index.css	Moves textarea border/background to .textarea-wrapper, reserves bottom strip for upload button, removes textarea padding hack.
webviews/activityBarView/index.css	Mirrors the wrapper/textarea styling change for activity bar comment forms.
src/@types/vscode.proposed.chatParticipantPrivate.d.ts	Adds workingDirectory?: Uri to LM tool invocation option interfaces.

Copilot's findings

• Files reviewed: 2/3 changed files
• Comments generated: 2