Skip to content

[fix] Increase max width of uploaded files in st.chat_input#13589

Merged
sfc-gh-nbellante merged 4 commits intodevelopfrom
fix/chat-file-chip-max-width
Jan 14, 2026
Merged

[fix] Increase max width of uploaded files in st.chat_input#13589
sfc-gh-nbellante merged 4 commits intodevelopfrom
fix/chat-file-chip-max-width

Conversation

@sfc-gh-nbellante
Copy link
Copy Markdown
Contributor

@sfc-gh-nbellante sfc-gh-nbellante commented Jan 14, 2026 •
edited
Loading

Describe your changes

Increased the maximum width of uploaded file components from 11rem to 100% to ensure that file names are fully visible and not truncated with css.

Testing Plan

  • No additional tests needed as this is a simple CSS change
  • Manual testing: Upload files with long names to verify they display properly without being cut off

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

@snyk-io
Copy link
Copy Markdown
Contributor

snyk-io bot commented Jan 14, 2026 •
edited
Loading

✅ Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues
✅ Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 14, 2026 •
edited
Loading

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-13589/streamlit-1.52.2-py3-none-any.whl
📦 @streamlit/component-v2-lib Download from artifacts
🕹️ Preview app pr-13589.streamlit.app (☁️ Deploy here if not accessible)

@sfc-gh-nbellante Graphite App
Copy link
Copy Markdown
Contributor Author

sfc-gh-nbellante commented Jan 14, 2026

This stack of pull requests is managed by Graphite. Learn more about stacking.

@sfc-gh-nbellante sfc-gh-nbellante changed the title Update file chip maxWidth from 11rem to 100% [fix] Increase max width of uploaded files in st.chat_input Jan 14, 2026
@sfc-gh-nbellante sfc-gh-nbellante added security-assessment-completed change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Jan 14, 2026 — with Graphite App
@sfc-gh-nbellante sfc-gh-nbellante marked this pull request as ready for review January 14, 2026 19:21
Copilot AI review requested due to automatic review settings January 14, 2026 19:21
Copilot AI reviewed Jan 14, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

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 aims to fix file name truncation in st.chat_input by increasing the maximum width of uploaded file components from 11rem to 100%.

Changes:

  • Increased maxWidth from 11rem to 100% in StyledChatUploadedFile styled component
Comments suppressed due to low confidence (1)

frontend/lib/src/components/widgets/ChatInput/fileUpload/styled-components.ts:82

  • The change to maxWidth: "100%" does not achieve the stated goal of making filenames fully visible. The truncateFilename() function (in truncateFilename.ts) still truncates filenames to 16 characters with middle ellipsis (e.g., "very-...me.pdf"). To properly show full filenames without truncation, either remove the JavaScript truncation logic in ChatUploadedFile.tsx line 181, or increase the maxLength parameter passed to truncateFilename(). The current change will make file chips grow wider but filenames will still be truncated by JavaScript, not CSS. Consider whether the goal is to: (1) allow file chips to expand to show the full truncated text without CSS clipping, or (2) remove truncation entirely to show complete filenames.
    maxWidth: "100%",

sfc-gh-bnisco
sfc-gh-bnisco reviewed Jan 14, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@sfc-gh-bnisco sfc-gh-bnisco left a comment

Choose a reason for hiding this comment

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

Can you please add some type of test to cover this behavior? A snapshot test seems like the best test type for this particular case.

@sfc-gh-nbellante
Copy link
Copy Markdown
Contributor Author

sfc-gh-nbellante commented Jan 14, 2026

Can you please add some type of test to cover this behavior? A snapshot test seems like the best test type for this particular case.

I believe there are snapshot tests but they didn't change because the JS truncation was already keeping it under the 11rem limit. We just happened to discover an example at office hours today where it's short enough to pacify the JS truncation but not short enough to pacify the CSS one.

@sfc-gh-nbellante sfc-gh-nbellante force-pushed the fix/chat-file-chip-max-width branch from 05ed8ef to 73515df Compare January 14, 2026 20:12
@sfc-gh-nbellante sfc-gh-nbellante merged commit 2baed15 into develop Jan 14, 2026
45 checks passed
@sfc-gh-nbellante sfc-gh-nbellante deleted the fix/chat-file-chip-max-width branch January 14, 2026 21:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@graphite-app graphite-app[bot] graphite-app[bot] left review comments

Copilot code review Copilot Copilot left review comments

@sfc-gh-bnisco sfc-gh-bnisco sfc-gh-bnisco approved these changes

Assignees

No one assigned

Labels

change:bugfix PR contains bug fix implementation impact:users PR changes affect end users

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sfc-gh-nbellante @sfc-gh-bnisco