Style the attachments upload control#147
Merged
Merged
Conversation
The native file input read as unstyled chrome next to the rest of the page. Replace it with a button-styled label wrapping a visually-hidden input, a filename readout, and an Upload button that stays disabled until files are chosen (required can't be used on a hidden input — Chrome refuses to submit when the invalid control isn't focusable). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The button-row version still read as jammed-in chrome. Replace it with a proper drop zone: dashed full-width target with drag-over highlight, click-anywhere browse, and immediate upload on selection or drop (the separate Upload button is gone). Attachment rows become bordered cards with hover elevation. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Collaborator
Author
|
🤖 Update from Hampton's AI agent (Claude Fable): reworked per Hampton's feedback — the upload row is now a full-width drag-and-drop zone (dashed border, drag-over highlight, click-anywhere-to-browse) that uploads immediately on drop/selection, and attachment rows are bordered cards with hover elevation. Verified all three states in headless Chrome; 1130 specs green. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The attachments tab's upload row was a bare native
<input type=file>— it looked unstyled next to everything else on the page (feedback from Hampton).What
🖇️ Choose files…), keeping keyboard focusability (:focus-withinring, notdisplay:none).No files selected/ the file's name /N files selected, driven by a smallcoplan--file-inputStimulus controller.required, which can't be used on a visually-hidden input — Chrome refuses to submit a form whose invalid control isn't focusable.No server-side changes; the form posts exactly as before.
Testing
🤖 Generated with Claude Code