fix(search): remove empty space in search modal

[shivxmsharma]

Description

The .searchResultsContainer was missing min-height: 0, which caused
overflow-y: auto to be ineffective. Flex items default to
min-height: auto, meaning the container expanded to show all content
instead of constraining its height and allowing internal scrolling.

Changes:

• Replaced flex-grow: 1 with flex: 1 (sets flex-basis to 0,
  ensuring space is distributed from zero rather than from content size)
• Added min-height: 0 to allow the container to shrink below its
  content size, enabling overflow-y: auto to work correctly
• Added margin-top: auto to .footer to keep it pinned at the bottom
  of the modal

Validation

Open the search modal and type a query that returns many results. The
results list should now scroll within the modal rather than expanding
the modal indefinitely. Footer remains pinned at the bottom on both
mobile and desktop viewports.

Related Issues

Fixes #670

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 check 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	Actions	Updated (UTC)
api-docs-tooling	Ready	Preview	Mar 14, 2026 8:02pm

[Copilot]

Pull request overview

Updates the SearchBox CSS layout in the web UI generator, aiming to improve how the results area and footer behave inside the search modal.

Changes:

• Replaced flex-grow: 1 with min-height: 0 on the search results container.
• Added margin-top: auto to the footer to push it toward the bottom of the modal.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.74%. Comparing base (38c58bc) to head (5590eeb).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #674   +/-   ##
=======================================
  Coverage   74.74%   74.74%           
=======================================
  Files         146      146           
  Lines       13255    13255           
  Branches      960      960           
=======================================
  Hits         9907     9907           
  Misses       3342     3342           
  Partials        6        6           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[avivkeller]

This does nothing.

[shivxmsharma]

This does nothing.

I think flex: 1 still expands to fill the full modal height when empty that's why the change doesn't fix the visual issue . Could you point me toward the right approach or whether the fix belongs in @node-core/ui-components instead?

[avivkeller]

I'm not 100% sure, like I said in the issue, why don't you try, test, repeat

[ovflowd]

To clarify, this is the issue that we're referring to!

[shivxmsharma]

I'm not 100% sure, like I said in the issue, why don't you try, test, repeat

Hey @avivkeller, I did more digging and traced the actual root cause — it's not in index.module.css at all.

The empty space comes from .noResultsWrapper inside @node-core/ui-components:

/* packages/ui-components — Search/Results/Empty */
.noResultsWrapper {
  height: 100%;
  padding-top: 2.5rem;
  padding-bottom: 7.75rem; /* ← 124px, this is the empty space */
}

That large padding-bottom is a vertical centering trick for full-screen mobile but it creates the blank gap on desktop. Any CSS change in index.module.css here won't touch it.

I've reverted the changes on this PR since they don't fix the root cause. Going to open a fix directly in nodejs/nodejs.org under packages/ui-components. Will link it here once it's up.