Burger Menu: Cluster List: Placement of pin cluster is incorrect, causes scroll bar

[richard-cox]

Setup

• Rancher version: dev of 2.10.0

Describe the bug

• hovering over a cluster in the burger menu should show an icon on right of row to pin the cluster to the top of the list
• when there are too many clusters a vertical scroll bar is shown
• in vue3 world hovering over a cluster shows the pin icon underneath the vertical scroll bar and prompts a horizontal scroll bar to be shown

To Reproduce

• add 4 or so clusters (can be imported/custom)
• reduce height of window such that a scroll bar appears
• hover over the local text

Result

Expected Result

• No horizontal scroll bar
• Pin visible
• This is how it previously looked (not great, but better than current)
  • 

Screenshots

Additional context

• the vertical scroll bar is quite common in my setup
  • legacy enabled, multiple global apps / extensions. chuck in dev tools at bottom and it's always shown

[richard-cox]

Linking

• ~https://github.com/rancher/dashboard/issues/11809~
• https://github.com/rancher/dashboard/issues/11810

[momesgin]

Seems we have the scrollbar issue in vue2 as well

[richard-cox]

Interesting, i couldn't reproduce with release-2.9. Looking at the screenshots the horizontal scroll bar is important

[gaktive]

I'll hold on filing a backport for now until we know what the solution is and if it's a quick one. 2.10.x seems reasonable but 2.9.x with its Vue2 may be a stretch.