Vertical tabs: Fix hover and selected styling

[andrew-ronaldson]

The styling on this extension does not match our other examples for Vertical tabs.

---

Jira Issue: PF-2699

[thatblindgeye]

@andrew-ronaldson is the ask here to have catalog view Vertical Tabs to look more like/use the PatternFly vertical Tabs implementation?

[sg00dwin]

@thatblindgeye While testing out the latest prerelease version @patternfly/react-catalog-view-extension in OCP, I noticed some issues with the VerticalTabs component within our Catalog. They look to be what @andrew-ronaldson is referencing in this issue, so I thought I'd add my additional notes.

I created this sandbox of the VerticalTabs component. And this surge url example shows the following issues as well.

• Left blue border for the selected tab is not positioned correctly relative to the link text and hover background.
• And the blue border height does not match the hover state background.

Interestingly, in the in the Vertical tabs docs example, the selected tab border positioning, looks to be correct. But inspecting the styles I noticed some .vertical-tabs-pf styles are nested in a patternfly-docs specific class .ws-react-e-vertical-tabs .vertical-tabs-pf {...}.