fix(search): align footer elements and add proper spacing

[shayan0v0n]

Description

Fixed alignment and spacing issues in the search box footer component. The "to close" and "Powered by" sections were improperly aligned and lacked adequate spacing between them. This PR ensures visual consistency and proper layout across light and dark modes.

Changes made:

• Updated footer CSS from justify-center to justify-between for proper element distribution
• Added proper margin spacing between keyboard shortcuts and the Powered By section
• Fixed vertical alignment of Orama logo and text
• Ensured the footer uses the full width of the search modal
• Improved responsive behavior for different screen sizes

Validation

Before: The "to close" and "Powered by" sections were touching without proper spacing, and elements were not properly aligned.

After: Proper spacing between sections, all elements are visually aligned, and the footer layout is consistent.

Testing performed:

• ✅ Verified alignment in light mode
• ✅ Verified alignment in dark mode
• ✅ Tested responsiveness on different screen sizes
• ✅ Confirmed keyboard navigation still functions correctly
• ✅ Checked that the Powered By link remains clickable and accessible

Screenshot of the fixed alignment:
before:

after:

Related Issues

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• 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)
nodejs-org	Ready	Preview	Jan 28, 2026 11:50am

[github-actions]

👋 Codeowner Review Request

The 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! 🙏

[shayan0v0n]

#8570

[paulobelucci]

Hey @shayan0v0n did you try just moving the entire div that contains the powerdByLink, to the shortcutWrapper div? Seems that it works as well, maybe no need to create another class to it.

[shayan0v0n]

Hello @paulobelucci, Actually, I need to keep the poweredByLink class because the alignment issue isn't just about horizontal spacing between sections—the text and logo inside the 'Powered by' link itself need specific vertical alignment.
what do you think?

[paulobelucci]

Ok. No problem. My bad, I thought the issue was just with the vertical alignment. 🙌🏼

[aymen94]

Thanks @shayan0v0n for your first contribution 😎, nice work!

[shayan0v0n]

Glad to hear that 🔥 , @aymen94

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.02%. Comparing base (6003a64) to head (9c275a8).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8571      +/-   ##
==========================================
+ Coverage   75.01%   75.02%   +0.01%     
==========================================
  Files         103      103              
  Lines        9037     9037              
  Branches      311      311              
==========================================
+ Hits         6779     6780       +1     
+ Misses       2256     2255       -1     
  Partials        2        2              

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

[araujogui]

LGTM

[araujogui]

Actually, it's misaligned on mobile, can u remove the margin left on mobile?