[fix] File Upload Drop Target truncates subtext#12192
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
✅ PR preview is ready!
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a regression where the file uploader's subtext (file type instructions) would truncate improperly instead of showing ellipsis when the content was too long to fit the available space.
- Adds CSS properties to enable proper text truncation with ellipsis for overflowing subtext
- Wraps the browse button in a container to prevent it from wrapping when space is constrained
- Adds an E2E test case with many file types to verify the fix works correctly
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| frontend/lib/src/components/widgets/FileUploader/styled-components.ts | Adds CSS properties for proper text truncation and flex layout constraints |
| frontend/lib/src/components/widgets/FileUploader/FileDropzone.tsx | Wraps the browse button in a no-wrap container |
| e2e_playwright/st_file_uploader.py | Adds test case with many file types to reproduce the truncation scenario |
| e2e_playwright/st_file_uploader_test.py | Updates test expectations to include the new test case |
sfc-gh-bnisco
added
security-assessment-completed
change:bugfix
sfc-gh-bnisco
force-pushed
the
bnisco/fix-12189
branch
from
51ee0b2 to
a09d8b7
Compare
There was a problem hiding this comment.
note: It is expected that only the Chromium screenshots for these tests are updated because of the scrollbar gutter differing between Chromium and FF and Webkit.
In FF and Webkit, there is enough space such that the text in the File Uploader all fits on one line: https://github.com/streamlit/streamlit/blob/develop/e2e_playwright/__snapshots__/linux/custom_theme_test/custom_themed_app%5Bfirefox%5D.png
| height: "auto", | ||
| }, | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO: Replace 'any' with a more specific type. | ||
| [StyledFileDropzoneInstructions as any]: { |
There was a problem hiding this comment.
note: I simplified this by using gap instead of manually managing padding
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
Describe your changes
GitHub Issue Link (if applicable)
Fixes #12189
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.