fix: 🐛 handle long filenames

[punkbit]

Why?

Bucky asked to complete a project assignment fixing a ClickHouse UI issue on the FileUpload component.

The assignment requires showing as much of the filename as possible with good UX across various screen widths.

Must submit the solution, including documentation of thought process and experimentation, which I've decided to keep it here in the PR description for easy access.

How?

• Container width-based responsive styles
• Prevent elements squashing, e.g. icon
• Provide support for icon as an inline element
• Filename truncation shortens the middle to show important parts, e.g. front and tail
• Shows the complete filename on hover, in large container widths, includes a small delay before revealing
• Adds story to showcase file upload in flyout context
• Adds story to showcase file upload progress (simulated action), including controller to show failure
• Create a new flyout reveal animation based on opacity, preventing "width transition" that causes "element position shifting"
• Replace redundant terms "Browse file" by "Browse" as the CTA lives in the context of file upload

Demo?

Before:

⚠️ Current file upload version can be found to be broken:

• Doesn't fit most container sizes
• Elements appear squashed
• Nested elements show outside the container
• Filename truncation doesn't show commonly important parts, e.g. front and tail
• On Flyout reveal, the current transition which is based on width causes the upload file "inner elements position shifting"

clickhouse-current-version-broken-examples-walkthrough.mov

⚠️ The following shows the Flyout "width transition" causing the element position shifting (it might be expected, but provided an elegant alternative).

default-flyout-width-transition-causes-component-shifting.mp4

⚠️ Some screenshots found on latest of main

💡 Since the success state doesn't display a text label like 'File uploaded,' it would be more consistent to use an error icon instead of text for failures. If the 'Failed upload' text is required, can consider relocating it to avoid lengthening the already long filename line. Alternatively, the icon alone would likely be sufficient for most users without the accompanying text. Thus, the icon must be a inline element to prevent detachment and keeping context, e.g. see gap.

After:

PR file upload version proposes the following changes:

clickhouse-pr-fix-walkthrough.mov

👌 Reveal the complete filename on hover in large containers. Skip smaller container/viewports for the moment. This pattern can be found in OS such as macOS, e.g. hover a long filename in the file explorer, or in the hash strings found in blockchain-like UIs.

clickhouse-upload-success-hover-reveal.mp4

It can be useful when errors are found, providing context to the user

clickhouse-upload-failure-reveal-retry.mp4

👌 Shows the file uploader in different container sizes. It uses the viewport switch for a quick demo, styles are not based in media queries viewports, but declared over container width breakpoints.

clickhouse-container-breakpoints-resize.mp4

Here's demonstrated with free width flow:

clickhouse-responsive.mp4

👌 Here's demonstrated that the default flyout "width transition" causes element position shifting. While this might be expected or a personal preference, a quick demo shows a very similar transition approach that handles it more gracefully without causing position shifting.

default-flyout-width-transition-causes-component-shifting.mp4

💡 Truncate filenames by shortening the middle revealing critical parts

Assume you have:

console.clickhouse.cloud_Archive.01-01-1975.lorem-ipsum-a-very-long-filename-001.csv
console.clickhouse.cloud_Archive.01-01-1975.lorem-ipsum-a-very-long-filename-005.csv
dashboard.mongodb.atlas_Export.12-15-2024.customer-data-analysis-report-final-v2.json
admin.postgresql.heroku_Backup.03-22-2023.transaction-logs-monthly-summary-march.sql

In the current faulty version you'd get something like:

console.clickhouse.cloud_Archive.01-~.csv
console.clickhouse.cloud_Archive.01-~.csv
dashboard.mongodb.atlas_Export.12-1~.csv
admin.postgresql.heroku_Backup.03-2~.csv

Notice that the first two filenames, when presented truncated, have the same shortened name, making it hard to differentiate.

In the PR proposed version you'd find easier to identify files if these are named in a maintainable way:

console.clickh...filename-001.csv
console.clickh...filename-005.csv
dashboard.mong...ort-final-v2.json
admin.postgres...ummary-march.sql

Notice that the first and last digits help identify the file more concisely, allowing for a shorter length.

Find two new stories in the storybook playground as follows:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
click-ui	Ready	Preview, Comment	Jan 19, 2026 3:56pm

[CLAassistant]

All committers have signed the CLA.

[vineethasok]

We could use the breakpoints form our list of tokens

[vineethasok]

@punkbit Why do we need the displayAs
Also here we are using block and inline but the createSVGWrapper uses flex and inline-flex? May I know the reason behind this

[punkbit]

Best to check the current version in the PR description, e.g. is squashed. This change is to keep retroactive support while addressing support for icons as an inline element, e.g. along text.

[vineethasok]

@gjones Shouldn't we use tokens instead of the hardcoded values here

[vineethasok]

I don't think we need to add defaultProps like using proptypes anymore as in react 19 it is deprecated and we would soon move to react 19 as well