[Tabs] Close button can become hidden under arrow nav button

[tayMAPNeil]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When you have multiple tabs open, the close button for the last tab can become hidden behind the navigation arrow. When this occurs there is no way to close the last tab in the list.

I tried to create a codepen sample but couldn't figure out how to get the repro case together with the standalone components.

Expected Behavior

If the tab is scrolled horizontally to display the tab title, the navigation arrow should be disappear to allow the user to interact with the close button on the tab.

Reproduction Sample

https://devtesting.mapsdevext.arcgis.com/apps/mapviewer/index.html?webmap=6dd9c22c0fef43f6aa163475bcbd978d

Reproduction Steps

1. Open this map: https://devtesting.mapsdevext.arcgis.com/apps/mapviewer/index.html?webmap=6dd9c22c0fef43f6aa163475bcbd978d
2. Open TableList
3. Open all five tables in the map using a click.
4. Use the nav arrow to scroll to the end of the tabs.
5. See the nav arrow never disappears and the close button is not visible or able to be interacted with.

Reproduction Version

2.12.2

Relevant Info

2024-09-16_15-37-20.mp4

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[macandcheese]

Related #10177

[geospatialem]

Blocked by #10177, which should mitigate the above. Will verify once the feature is added, anticipated for September or 2.13.