Fix(web): mobile hide extra padding

[arvindm84]

Description

• This PR fixes Mobile Menu with weird paddings #533 by removing the extra empty padding shown when the mobile menu is expanded with no navigation items, while keeping the actions (search bar, brightness toggle, GitHub icon) visible.

Validation

Before:

After:

Related Issues

Fixes #533

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run node --run test and all tests passed.
• I have checked code formatting with node --run format & node --run lint.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
api-docs-tooling	Ready	Preview	Dec 27, 2025 11:32am

[avivkeller]

Hmm, if we are setting this element to not display, I wonder if I can just not render it if no nav items are provided. I'll look into that on the components repository

[arvindm84]

Hi. Thanks for the suggestion. The ideal fix would be to update upstream in @node-core/ui-components such that the code conditionally renders the navItems container only when items exist. For this doc-kit PR I only made a CSS change in the main classes to avoid touching node_modules. However, it seems like an index.js file for the NavBar elements in @node-core/ui-componenets has to be modified. Please find my prototype implementation in relation to the doc-kit in the files attached:

Modified file:
index.js
Path: \node_modules@node-core\ui-components\Containers\NavBar\index.js

Tests:
nav-bar.test.txt
// (Rename to .mjs file rather than .txt; .txt format is only for uploading in this message)
Path: \src\generators\web\ui_tests_\nav-bar.test.mjs

Please check and advise on how these changes can be pushed to remove the extra padding.