Fixed - long branch name overflows selected branch button

[Annaseli]

Closes #8930 #8639

Change Description

Bug Fix

This PR fixes a UI issue where long branch names caused overflow in the "selected branch" button located at the top-left corner of many pages, as shown below:

Fix

• Applied React Bootstrap utility classes to truncate long branch names.
• Added a max-width to the branch button to prevent it from growing indefinitely.
• These changes were made in refDropdown.jsx.

Additional Layout Adjustments

Updating the branch button layout caused misalignment issues with nearby buttons in the top of the page. Specifically:

• Buttons were misaligned or pushed in different directions.
• Buttons became too wide.
• Text within buttons wrapped.
• Buttons stacked vertically or appeared cramped on some pages or had no spaces between them.

To address this:

• Updated ActionsBar and ActionGroup components in controls.jsx to use the React Bootstrap grid system.
• Fixed styling in controls.jsx and the rest of the files to:
  • Prevent text wrapping inside buttons
  • Add proper spacing between buttons
  • Ensure consistent horizontal layout across pages
  • Pushed the buttons on the right to the right corner of the layout.
  • Fixed the misalignment
  • Prevented from the buttons become to wide.
  • Prevented Buttons stacking.

Fix:

Testing Details

Tested locally on lakeFS with Fluffy.

I reviewed each page that uses the ActionsBar and ActionGroup components to ensure that the style changes didn’t introduce any layout or styling issues.

[N-o-Z]

Looks great!
Can you explain why you've decided to add both hover and text wrap in the path?
I would think if we decided to add a hover - any text that doesn't fit in the width will be cut

[Annaseli]

Looks great! Can you explain why you've decided to add both hover and text wrap in the path? I would think if we decided to add a hover - any text that doesn't fit in the width will be cut

@N-o-Z
I actually meant to create a separate issue for handling the long branch name in the path, since this PR was already quite large, and I forgot to mention it in the description. The original changes were focused on fixing the buttons in the top bar.

But now I've also added code to handle the long path name, so it now looks like this:

[N-o-Z]

Thanks!

Linking an issue would have also worked@