Layout shift on button hover, focus - MyStories

[prajwalkulkarni]

Describe the bug

In the "My stories" page, there are two options under 'My stories', i.e, My Submissions & Following, both of which do not have a border in the default state, but a border is added when the buttons are hovered, focused or selected. Such borders based on state cause light shifts in the layout, particularly when the Following section is selected and My Submissions is hovered on.
Additionally, having no border in the default state makes it difficult to differentiate between the layout and the button.

To Reproduce

Steps to reproduce the behavior:

1. log in to your user-story account
2. Navigate to your stories (/myStories)
3. Click on the 'Following' button.
4. Hover on 'My Submissions' button.
5. You can observe that the 'Following' button is slightly shifted towards the right when the hover state or select state is active.

Expected behavior

A default border conforming to the design system of the application could be added in the default state. The border color can then be changed on hover, select state. This way there are no layout shifts observed which also makes it easier to differentiate and identify the button quickly in the layout.

Logs

If applicable, add logs to help explain your problem (e.g. the error message and/or exception traceback).

Environment (please complete the following information):

• OS: Windows 11
• Browser: Chrome

Additional context

Add any other context about the problem here.