[Bug]: responsive design needs to better accommodate the addition of the settings icon

[kgryte]

Description

Encountered an error when adjusting the viewport width to emulate various devices. Upon adding the settings icon, we didn't update the top-navigation styling to accommodate the icon at various device widths. Screenshots are included below:

We need to determine our strategy for incorporating settings in the top navigation.

Related Issues

None.

Questions

No.

Demo

No response

Reproduction

-   navigate to the documentation for a particular package.
-   open the inspector.
-   emulate various devices.
-   notice that, at certain widths, our responsive design breaks.

Expected Results

The expected behavior is that our design fluidly accommodates devices of most widths, barring possibly the smallest (such as Galaxy Fold).

Actual Results

Our design breaks.

Environments

Firefox, Chrome, Safari, Microsoft Edge, Internet Explorer, Other Browser

Browser Version

No response

Node.js / npm Version

No response

Platform

No response

Checklist

• Read and understood the Code of Conduct.
• Searched for existing issues and pull requests.