Skip to content

Fix upload button rendering on top of text in comment input#8793

Merged
alexr00 merged 2 commits into
mainfrom
copilot/fix-upload-file-rendering
Jun 19, 2026
Merged

Fix upload button rendering on top of text in comment input#8793
alexr00 merged 2 commits into
mainfrom
copilot/fix-upload-file-rendering

Conversation

Copilot AI commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

The cloud-upload button in the comment input was absolutely positioned over the textarea, causing it to overlap user-entered text. The previous padding-bottom: 28px workaround only reserved space at the very end of the textarea content, so any wrapped or scrolled lines still rendered behind the button.

Changes

  • webviews/editorWebview/index.css, webviews/activityBarView/index.css: drop position: absolute on .textarea-wrapper .comment-upload-button and let it flow as a flex row beneath the textarea (the wrapper is already flex-direction: column). Remove the now-unnecessary padding-bottom: 28px on the textarea.
.textarea-wrapper .comment-upload-button {
    align-self: flex-start;
    margin: 2px 0 4px 4px;
    /* …unchanged styling… */
}

The button now sits below the input anchored to the bottom-left, so it can no longer overlap text. The top-right .title-action (sparkle/generate) remains absolutely positioned and is unaffected.

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix upload file rendering on top of text in input Fix upload button rendering on top of text in comment input Jun 12, 2026
Copilot AI requested a review from alexr00 June 12, 2026 12:46
@alexr00 alexr00 marked this pull request as ready for review June 19, 2026 13:38
Copilot AI review requested due to automatic review settings June 19, 2026 13:38

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes the comment input’s “Upload files” (cloud upload) button overlapping textarea content by removing its absolute positioning and letting it render as a normal flex item beneath the textarea in the existing column flex layout. This eliminates the need for the prior padding-bottom: 28px workaround on the textarea.

Changes:

  • Removed padding-bottom: 28px from the comment textarea styles (both webviews).
  • Changed .comment-upload-button from position: absolute (bottom-left overlay) to align-self: flex-start with margins so it flows below the textarea.
  • Kept the top-right .title-action absolutely positioned (editor webview), relying on existing padding-right to avoid overlap.
Show a summary per file
File Description
webviews/editorWebview/index.css Moves the upload button out of the textarea overlay and removes the textarea bottom-padding workaround while preserving the title-action overlay behavior.
webviews/activityBarView/index.css Applies the same upload button layout change and removes the textarea bottom-padding workaround in the activity bar view.

Copilot's findings

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

@alexr00 alexr00 merged commit 50d2cc3 into main Jun 19, 2026
7 checks passed
@alexr00 alexr00 deleted the copilot/fix-upload-file-rendering branch June 19, 2026 14:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants