Fix/UI overflow long names 9616

[prabhath004]

Closes #9616

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:

1. Created reusable TruncatedText component (controls.jsx) with:

   • Configurable max length
   • Ellipsis truncation for overflow
   • Bootstrap OverlayTrigger tooltips showing full text on hover

2. 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'

3. 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

4. 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:

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

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

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

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

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

6. The clock is also now aligned with the text!

7. 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]

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]

@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.