Description

There are several UI overflow issues when using long branch names, tag names, or path names in various parts of the lakeFS WebUI.
In multiple modals and tabs, the text overflows or misaligns with surrounding elements.

1. Upload Modal

Steps to reproduce:

1. Create a branch with a long name.
2. Go to the Object tab → click on Upload.

Issue:
The long branch name overflows and breaks the layout.

Screenshot:

2. Uncommitted Changes

Steps to reproduce:

1. Create a branch with a long name.
2. Upload some objects.
3. Click on Uncommitted Changes.

Issue:

• The branch name overflows in two places (title and path).
• The “Show object changes” label appears too close to the clock icon.

Screenshot:

3. Tags Modal

Steps to reproduce:

1. Create a tag with a long name.
2. Go to the Tags tab.

Issue:
The long tag name overflows the modal layout.

Screenshot:

Note:
This can likely be fixed similarly to how long branch names are handled in the Branches tab in a similar scenario.

4. Long Path Name Misalignment in Uncommitted Changes

Steps to reproduce:

1. Upload an object with a long path name.
2. Go to Objects → click Uncommitted Changes.

Issue:

• The long path name wraps in the table which causes misalignment - the “Calculate change summary” text is not aligned with the clock icon.

Screenshot:

5. Pull Requests Tab

Steps to reproduce:

1. Upload objects to a branch with a long name.
2. Commit the changes.
3. Go to the Pull Requests tab.
4. Create a pull request to merge from this long-name branch to main.

Issue:
The long branch name overflows in the pull request UI.

Screenshots:

6. Compare Tab

Steps to reproduce:

1. Go to the Compare tab.
2. Compare between a branch with a long name and main.

Issue:
The long branch name overflows and breaks the layout.

Screenshot:

Expected Behavior

• Long names (branches, tags, paths) should be trimmed with an ellipsis (...).
• On hover, the full name should be displayed in a tooltip.