fix(nav, masthead): Edit navbar styling to handle dynamic window sizing

[jenny-s51]

Edit navbar styling to handle dynamic window sizing.

Description

Adds media query to set proper margin on small viewports.

Tests N/A - styling updates only.

How Has This Been Tested?

1. npm install and run Model Registry UI.

To run:

cd clients/ui/frontend && npm run start:dev   

cd clients/ui/bff && make run MOCK_K8S_CLIENT=true MOCK_MR_CLIENT=true

2. Resize viewport to test updates.

Current:

Screen.Recording.2025-01-20.at.4.09.15.PM.mov

Kubeflow Central UI:

Kubeflow-Central-UI.mov

Merge criteria:

• All the commits have been signed-off (To pass the DCO check)

• The commits have meaningful messages; the author will squash them after approval or in case of manual merges will ask to merge with squash.
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has manually tested the changes and verified that the changes work.
• Code changes follow the kubeflow contribution guidelines.

If you have UI changes

• The developer has added tests or explained why testing cannot be added.
• Included any necessary screenshots or gifs if it was a UI change.
• Verify that UI/UX changes conform the UX guidelines for Kubeflow.

[lucferbux]

/lgtm

Found one css issue but we can address that in a follow up, great work here @jenny-s51 thanks a lot!

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: lucferbux

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• clients/ui/OWNERS [lucferbux]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment