fix: Long dashboard titles overflow the navbar tab

[ericlln]

• Moved the title into its own element in the navbar tab so that text-overflow: ellipsis would work properly.
• Tested by creating dashboards with both long and short titles to confirm that long titles are truncated with ellipses, and short titles display in the same way as before.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.76%. Comparing base (ae544fa) to head (35f1b11).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #2348    +/-   ##
========================================
  Coverage   46.76%   46.76%            
========================================
  Files         710      710            
  Lines       39107    39107            
  Branches     9773     9958   +185     
========================================
  Hits        18288    18288            
  Misses      20808    20808            
  Partials       11       11            

Flag	Coverage Δ
unit	46.76% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mofojed]

I'm assigning @dsmmcken for review as this is mainly a styling thing.

[dsmmcken]

if we are truncating it we should also tooltip it so users can get the full name.

If the user has a dash:
my_long_dashboard_name_1
my_long_dashboard_name_2

There's no way to tell them apart.

[ericlln]

Currently the Tooltip component is placed inside of the span for the title to make it appear only when the text is hovered, which prevents it from conflicting with the tooltip on the close button. On enterprise, there is no tooltip for the close button, and the tooltip is triggered by hovering over any part of the tab, rather than only the text.