Fix pool name overflow in Tabbed component for side-tabs mode

[Copilot]

Summary

Fixes #15067

Long pool names overflow behind other UI elements in the Machine Pools section of the cluster create/edit view.

Occurred changes and/or fixed issues

• Pool names now truncate with ellipsis when too long in vertical/side-tabs mode
• Full name visible via native browser tooltip on hover
• Fix applied to the Tabbed component to benefit all vertical tabs throughout the application

Technical notes summary

CSS changes to .side-tabs .tabs .tab A in shell/components/Tabbed/index.vue:

• Added overflow: hidden, text-overflow: ellipsis, white-space: nowrap, display: block to the first span child for text truncation

Template changes:

• Added title attribute to the tab label span (conditional on sideTabs mode) to show full name on hover

Areas or cases that should be tested

• Create/edit cluster with long pool name (31+ characters)
• Verify pool name truncates with ellipsis in the Machine Pools vertical tabs
• Verify tooltip shows full name on hover
• Verify all vertical/side-tabs in the application handle long labels correctly
• Test in both light and dark mode
• Local testing done in Firefox

Areas which could experience regressions

• Machine Pools section in cluster create/edit view (rke2.vue)
• Any component using Tabbed with side-tabs mode
• Vertical tab navigation throughout the application

Screenshot/Video

Before: Pool name overflows behind UI elements

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Pool name overflows behind other UI elements</issue_title>
<issue_description><!--------- For bugs and general issues --------->
Setup

• Rancher version: 2.11.4
• Browser type & version: Firefox

Describe the bug
Long pool names overflow behind other UI elements and are unreadable.

To Reproduce
Steps:

1. Create a cluster with a very long machine pool name. (31 characters in my case)
2. Check the UI.

Result

Expected Result
Any one of the following:

1. The pool name gets truncated in the UI. (since its unreadable past a certain point)
2. The pools field expands and squishes other elements (up to a limit).

Screenshots:

Comments on the Issue (you are @copilot in this section)

• Fixes Pool name overflows behind other UI elements #15067

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[nwmac]

@copilot This is not the fix I think we need - the issue is in the create/edit view for provisioning.cattle.io.cluster - look at the rke2.vue file. I think the fix might be needed on the Tabbed component. The inner Tab, when showed vertically, probably needs to have the width set to 200px - the same as the container - and for the overflow and text-ellipsis to be set as well. Can you take a look please?

[Copilot]

@copilot This is not the fix I think we need - the issue is in the create/edit view for provisioning.cattle.io.cluster - look at the rke2.vue file. I think the fix might be needed on the Tabbed comp...

You're right, I was fixing the wrong component. I've reverted my changes to the detail view and applied the fix to the Tabbed component (shell/components/Tabbed/index.vue) instead.

The fix adds:

1. Text truncation CSS (overflow: hidden, text-overflow: ellipsis, white-space: nowrap) to the span inside .side-tabs .tabs .tab A > span:first-child
2. A title attribute to show the full tab name on hover (native browser tooltip)

This ensures long pool names are truncated with ellipsis in the vertical tabs of the Machine Pools section in the create/edit cluster view.

Commit: 2dac30c

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• download.cypress.io
  • Triggering command: /usr/local/bin/node /usr/local/bin/node index.js --exec install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[nwmac]

Tested, nice fix. LGTM