Fix button width in mobile nav

[bethcollins92]

Done

• Add styles to fix p-navigation__link when used on a button element

Fixes #4444

QA

• Open demo
• Go to the default Navigation example
• Inspect the list of links, and add another p-navigation__link on a button element, wrapped in a <li class="p-navigation__item"></li>
• Check the button is full width, compared to on live or here

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

[webteam-app]

Demo starting at https://vanilla-framework-4455.demos.haus

[bartaz]

@bethcollins92 thanks, looks good - but I think we should have an example in Vanilla to make sure we don't break it in future.
I guess just changing dropdowns here to buttons would work:

BTW, I noticed that when you use button on a navigation dropdown it has misaligned icon, I guess because of additional margin. Maybe we can fix that as well here.

[bethcollins92]

Thanks @bartaz - I've swapped the links out for buttons in the example and fixed the misaligned button

[bartaz]

LGTM, thanks