fix(ui-components): reduce empty search state padding#8724
Closed
shivxmsharma wants to merge 1 commit intonodejs:mainfrom
Closed
fix(ui-components): reduce empty search state padding#8724shivxmsharma wants to merge 1 commit intonodejs:mainfrom
shivxmsharma wants to merge 1 commit intonodejs:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts the empty-state layout in the ui-components search modal to avoid excessive blank space when a query returns no results.
Changes:
- Removes
h-fullfrom the empty-results wrapper so it no longer stretches to the parent height. - Reduces bottom padding from
pb-31topb-6to keep the modal compact.
💡 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.
Contributor
|
Lighthouse Results
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Description
The search modal shows a large blank space below the "No results found" message when a search returns no results.
The root cause was in
.noResultsWrapperinsideSearch/Results/Empty:h-full— stretched the wrapper to the full parent height, expanding the empty areapb-31(7.75rem / 124px) — excessive bottom padding originally used as a visual centering trick for full-screen mobile, but creates a large visible blank gap on desktopFix: Remove
h-fulland reducepb-31→pb-6(1.5rem). The wrapper now sizes to its content and the modal stays compact.Validation
Ctrl+K)Related investigation and earlier fix attempts in nodejs/doc-kit#674.
Related Issues
Addresses nodejs/doc-kit#670
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.