Adjust tabs selected styling and the responsiveness behavior

[djalmaaraujo]

Description

• [x] Add responsiveness behavior for Nav.Tab
• [x] Adjust selected item styles for smaller screens (box-shadow) by adding extra borders

Checklist

• [ ] This PR has good automated test coverage
• [ ] The storybook for the component has been updated

Steps to Test — Responsiveness Behavior

1. Pull down PR.
2. npm run dev.
3. Open http://localhost:6006/?path=/story/navigation-nav--tab
4. Reduce the viewport smaller than the tab items size
5. Expect to have a horizontal scrollbar

Steps to Test — Box shadow bug

1. Pull down PR.
2. npm run dev.
3. Open http://localhost:6006/?path=/story/navigation-nav--tab
4. By using the device toolbar in Chrome, put on a iPhone XR size with 50% of zoom

5. Expect to have the selected item with a bottom border and not left/right borders (see screenshot above)

Before	After

|

|

[netlify[bot]]

✅ Deploy Preview for vip-design-system-components ready!

Name	Link
🔨 Latest commit	0f573b2fe32c10bd8abc4dfed39318796226bc58
🔍 Latest deploy log	https://app.netlify.com/sites/vip-design-system-components/deploys/663236109d8e6c00082cb500
😎 Deploy Preview	https://deploy-preview-384--vip-design-system-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.