Fix/UI overflow long names 9616 #9639

prabhath004 · 2025-11-04T06:02:59Z

Change Description

Background

This PR addresses UI overflow issues in the lakeFS WebUI when displaying long branch names, tag names, and file paths. The overflow caused text to extend beyond container boundaries, breaking the layout and making the interface difficult to use. The fix implements a consistent truncation pattern across all affected components using CSS ellipsis and tooltips to show full text on hover.

Bug Fix

1. Problem - The reason for opening the bug

Multiple UI components displayed long branch names, tag names, and file paths without proper text truncation, causing:

Text overflow beyond container boundaries
Misalignment of UI elements (buttons, icons)
Broken responsive layouts
Poor user experience when working with descriptive naming conventions

The issue affected 8 different locations:

Upload Modal title
Uncommitted Changes message
Tags page
Branches page
Pull Requests list and details
Compare tab (merge modal and comparison view)
Long file/folder paths in tree views

2. Root cause - Discovered root cause after investigation

The root causes were:

Missing overflow: hidden, text-overflow: ellipsis, and white-space: nowrap CSS properties on text containers
Lack of flexbox constraints (minWidth: 0, maxWidth) to allow proper text truncation
Table columns without width constraints, allowing infinite expansion
Missing table-layout: fixed on tables containing long text
Inconsistent truncation patterns across different components

3. Solution - How the bug was fixed

Implemented a comprehensive truncation solution:

Created reusable TruncatedText component (controls.jsx) with:
- Configurable max length
- Ellipsis truncation for overflow
- Bootstrap OverlayTrigger tooltips showing full text on hover
Applied inline styles using flexbox patterns:
- Set flexShrink: 0 on non-truncatable text
- Set flexShrink: 1 with minWidth: 0 on truncatable elements
- Added maxWidth constraints appropriate to each context
- Used overflow: hidden, textOverflow: 'ellipsis', whiteSpace: 'nowrap'
Fixed table layouts for tree views:
- Added table-layout: fixed to force column width constraints
- Set .tree-path column to 60% width
- Applied truncation styles to all path cells
Added title attributes for native browser tooltips as fallback

Files modified:

webui/src/lib/components/controls.jsx - Created TruncatedText component
webui/src/pages/repositories/repository/objects.jsx - Upload Modal & Uncommitted Changes
webui/src/pages/repositories/repository/tags.jsx - Tags page
webui/src/pages/repositories/repository/pulls/pullsList.jsx - PR list
webui/src/pages/repositories/repository/pulls/pullDetails.jsx - PR details
webui/src/lib/components/repository/compareBranchesActionBar.jsx - Merge modal
webui/src/lib/components/repository/compareBranches.jsx - Compare view
webui/src/lib/components/repository/tree.jsx - Object browser & URI navigator
webui/src/lib/components/repository/treeRows.jsx - Tree rows in changes view
webui/src/styles/objects/tree.css - Table layout and column width constraints

New Feature

N/A - This is a bug fix.

Testing Details

How were the changes tested?

Tested all 8 affected locations with extremely long branch names, tag names, and file paths to verify proper truncation and tooltip behavior:

Very long branch names are now represented by ellipses (...)

Very long tag names are also truncated by ellipses (...)

Even when we create a pull request the long branch name is truncated here as well

The compare also shows the truncated long branch name while showing the differences

Upload Modal - even here when we have long branch names the UI doesn't overflow

The clock is also now aligned with the text!

The delete message also uses truncated text

All truncated text displays full content in tooltips on hover, maintaining accessibility while fixing the layout issues.

Breaking Change?

No breaking changes. This PR only modifies UI presentation and styling. All APIs, CLI commands, and client functionality remain unchanged. The changes are purely cosmetic improvements to prevent UI overflow issues.

Additional info

All changes use standard CSS and React Bootstrap patterns
Tooltips automatically appear on hover for truncated text
Responsive behavior adapts to different screen sizes
No performance impact - truncation is handled by CSS

Contact Details

[email protected]

CLAassistant · 2025-11-04T06:03:06Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

prabhath004 seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

Annaseli · 2025-11-06T19:37:11Z

@prabhath004

Thank you for all these valuable changes, this is a great start!
The result looks good, but I’ve added comments on a few files. Please note that these comments apply throughout your code changes to the other related files as well.

Also, try to achieve the same result with as few style changes as possible to keep the code clean and avoid unnecessary overrides or duplication.

Annaseli · 2025-11-06T19:12:09Z

webui/src/pages/repositories/repository/objects.jsx

-          <Modal.Title>
-            <UploadIcon className="me-2" />
-            Upload Objects to Branch &apos;{reference.id}&apos;
+          <Modal.Title style={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>


We have a convention to avoid using style={{}} directly in the JavaScript code. Please try to use Bootstrap’s built-in classes or utilities if they fit this case. If not, use CSS instead.

Annaseli · 2025-11-06T19:14:31Z

webui/src/pages/repositories/repository/objects.jsx

-            <UploadIcon className="me-2" />
-            Upload Objects to Branch &apos;{reference.id}&apos;
+          <Modal.Title style={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
+            <UploadIcon className="me-2" style={{ flexShrink: 0 }} />


What’s the purpose of style={{ flexShrink: 0 }} here? Does it change anything?

Annaseli · 2025-11-06T19:21:16Z

webui/src/pages/repositories/repository/objects.jsx

+              whiteSpace: 'nowrap',
+              minWidth: 0
+            }} title={reference.id}>{reference.id}</span>
+            <span style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>&apos;</span>


Regarding this block:

Please avoid using inline style={{}} prefer Bootstrap classes or utilities where possible, and use CSS only if needed.

Some properties like whiteSpace: 'nowrap' and flexShrink: 0 repeat, try to minimize duplication/overrides.

Also, check if all of these are required:

overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',

Maybe 1–2 are enough to achieve the desired result (I didn’t check , just asking you to verify whether all three are actually needed).

Annaseli · 2025-11-06T19:26:01Z

webui/src/pages/repositories/repository/objects.jsx

          onRevert={onReset}
-          changesTreeMessage={<p>Showing {changesResults.length} change{changesResults.length !== 1 ? 's' : ''} for branch <strong>{reference.id}</strong></p>}
+          changesTreeMessage={
+            <p style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', flexWrap: 'wrap' }}>


Avoid hardcoded numbers, use Bootstrap’s responsive sizing utilities instead. They’re tested and ensure proper behavior across different screen sizes.

"rem" isn’t part of our convention, please use the same size unit used in other files for consistency.

Annaseli · 2025-11-06T19:27:56Z

webui/src/pages/repositories/repository/pulls/pullsList.jsx

-                <div className="btn btn-light btn-sm">{pull.destination_branch}</div>
-                <ArrowLeftIcon className="m-1" size="small" verticalAlign="middle"/>
-                <div className="btn btn-light btn-sm">{pull.source_branch}</div>
+            <div className="float-end mt-2" style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', maxWidth: '50%' }}>


Please avoid custom sizes (e.g., maxWidth: '50%'). Prefer Bootstrap utilities; use CSS only if no built-in class fits.

Annaseli · 2025-11-06T19:28:32Z

webui/src/styles/objects/tree.css


 .tree-path {
  font-size: 0.9rem;
+  white-space: nowrap !important;


Why did you have to add the !important; here? Is in necessary?

Annaseli · 2025-11-06T19:30:23Z

webui/src/styles/objects/tree.css

Please avoid duplicating parameters in the CSS file, maybe this can be encapsulated better?
Also, avoid using comments in this file

prabhath004 added 3 commits November 3, 2025 18:59

Fix UI overflow issues with long branch/tag/path names (treeverse#9616)

cda0154

updated branches.jsx

449a709

updated clock icon

3150a00

itaiad200 requested review from Annaseli and itaigilo November 4, 2025 08:00

Annaseli requested changes Nov 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix/UI overflow long names 9616 #9639

Fix/UI overflow long names 9616 #9639

Uh oh!

prabhath004 commented Nov 4, 2025

Uh oh!

CLAassistant commented Nov 4, 2025

Uh oh!

Annaseli commented Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix/UI overflow long names 9616 #9639

Are you sure you want to change the base?

Fix/UI overflow long names 9616 #9639

Uh oh!

Conversation

prabhath004 commented Nov 4, 2025

Change Description

Background

Bug Fix

New Feature

Testing Details

Breaking Change?

Additional info

Contact Details

Uh oh!

CLAassistant commented Nov 4, 2025

Uh oh!

Annaseli commented Nov 6, 2025

Uh oh!

Annaseli Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Annaseli Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Annaseli Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Annaseli Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Annaseli Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Annaseli Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Annaseli Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants