Resolve "Follow up to "Styling of the MR widget's info and pipeline sections""

What does this MR do?

This MR resolves the UX issues identified in #49110 (closed):

• Truncate long branch and environment names and show tooltip containing full text.
• Change "commits behind" text to not show long branch names and link to target branch commits.

Notes about this MR:

• Here's the EE Port (gitlab-ee!6921).
• Truncated names actually show 19 characters and then the ellipsis (i.e., 12.5em). Any more caused the line to wrap, which I think is against the intention of this issue.
• A custom reusable component called tooltip-on-truncate was made to handle conditionally rendering the tooltip if the text has been truncated or not.

What are the relevant issue numbers?

Closes #49110 (closed)

Screenshots

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the database guides