Navigation in the apps charts carousel is not working correctly

[IsaSih]

Setup

• Rancher version: v2.10-212d8b6e92992235d791d8f2aaea8436ab4f6b77-head
• Browser type & version: Version 130.0.6723.70 (Official Build) (arm64)

Describe the bug
The charts displayed in the carousel animation are misaligned leading to the first one (Vault) not being clickable at all and many blank spaces are shown in the carousel navigation

To Reproduce
1- From the Rancher UI, select a cluster in the side menu bar
2- From the cluster menu options, go to Apps > Charts
3- Observe how the carousel navigation is misaligned
4- Use the arrows to navigate the carousel

Result
User is not able to select the first chart that is displayed in the carousel, whereas there are a few blank spaces when navigating the charts carousel in both ways

Expected Result
Carousel must display an extension at a time and an chart should be displayed and clickable for each frame of the carousel, with no blank spaces

Screenshots

Screen.Recording.2024-11-01.at.15.47.27.mov

[richard-cox]

I'm guessing another item was added (3 entries --> 4). We had this before i think when the number changed.

Definitely need unit / e2e tests with varying numbers of entries

[IsaSih]

This is also occurring in v2.9-head (v2.9-1d1065cd5bf09c23834720420e1153712fa43439-head)

[IsaSih]

Same issue still identified in
Rancher | v2.11-a1bda936c809e0394520c9d40d2998529223401e-head
Dashboard | master 478e195
Rancher CLI | v2.11.0-rc.1