Badges aren't visible on top nav navigation buttons on small screens

[GCHQ-Developer-847]

Summary of the bug

On a top nav on a small screen, any badges that have been added to navigation buttons are not visible.

🪜 How to reproduce

1. View a top nav component which has badges on its navigation buttons (e.g. StackBlitz)
2. Make the screen smaller so that the navigation items and buttons collapse into a menu
3. With the menu expanded, see that the badge is not visible at all

📸 Screenshots or code

Badge is visible on a larger screen e.g.:

But then you can't see it anywhere where you make the screen smaller (see the "Notifications" button):

🧐 Expected behaviour

The badge should move to the inline position when on a small screen (e.g. like the badge in this tabs Storybook example).

📝 Acceptance Criteria

Given there is a top navigation on a page with a navigation button that has a badge on it
When I make the screen smaller and expand the navigation menu
Then the badge should be visible and displayed in the "inline" position

Additional info

Similar to #3079.

I think the position prop on ic-badge should be overridden to always be "inline" when on a small screen (because allowing the "near" and "far" positions would mean the badge is cut off at the side of the screen).

[MI6-255]

Will need to be fixed in v2 and v3