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

• Burger Menu: Cluster List: Placement of pin cluster is incorrect, causes scroll bar #11809
• Vue3: Burger Menu: Cluster List: Placement of cluster tooltip incorrect #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.

[izaac]

Rancher version: v2.11-7839201dc49c3cbd138b0bb99028c5705825d699-head
UI version: release-2.10 d5b785b

I wasn't able to reproduce. I've changed the size, and smaller than a phone screen and the horizontal bar didn't appear in the menu.

In the screenshot below this is the most I could resize the browser horizontally, the scrollbar there is expected as there was 10 clusters in the setup.