Vertical nav> Icon and text shift on select

[lil-kim]

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

When a row is clicked, the icon and text shifts 3 px.

Steps to reproduce the behavior:

1. Go to https://clarity.design/documentation/vertical-nav/basic-structure/project-pokemon#examples

2. Click on any of the examples. The bug exists in all examples - whenever the vertical blue selection bar is displayed.
   

3. Try clicking the rows in the vertical nav

4. On selection, a 3 px vertical blue bar appears on the left side. This causes the icon and or text to be pushed 3px to the right.

Expected behavior

In the selected state, the space between the icon and the blue bar should be reduced by 3px so that the icon and text don't shift.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 11

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

Add any other notes about the problem here.

[github-actions]

🎉 This issue has been resolved in version 12.4.1 🎉

The release is available on:

• GitHub release
• v12.4.1

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 13.8.1 🎉

The release is available on:

• GitHub release
• v13.8.1

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.