explorer: Prevent search bar expansion from shifting main navigation

[nortonandreev]

Description

Currently, when focusing on the search bar in the Explorer, the input field expands. As a result, the main navigation elements are pushed to the left, causing an abrupt and unpleasant shift in the layout. We should update the styling or layout logic so that focusing on the search input does not cause the navigation to move.

Steps to Reproduce

1. Open the Explorer page.
2. Click on the search bar at the top of the page.
3. Observe that the search input expands and pushes the main navigation to the left.

Expected Behavior

The search bar should expand in such a way that it does not alter the position of other navigation elements. There should be no noticeable layout shifts when the search bar gains focus.

Actual Behavior

When the search bar receives focus, it expands and displaces the main navigation items, leading to an unpleasant visual shift.

Screen.Recording.2024-12-18.at.17.42.18.mov

Suggested Solution

• Apply a fixed width and ensure adequate padding or margin around the search bar so that its focused state does not affect the layout of other elements.
• Consider using absolute positioning or a container with fixed dimensions to handle the expanded state without shifting surrounding content.

Additional Context

This behavior can be distracting for users and may impact the overall usability of the Explorer interface. A stable, non-shifting navigation bar would provide a smoother user experience.