feat: enhance footer layout with powered by Alignment #8573
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 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! 🙏 |
There was a problem hiding this comment.
Pull request overview
Improves the visual alignment of the search dropdown footer “Powered by Orama” area by adjusting layout wrappers/styles so the logo/text align consistently.
Changes:
- Add a dedicated wrapper class for the “Powered by” section in the footer markup.
- Update footer styling to introduce spacing between footer groups and support improved alignment.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| apps/site/components/Common/Searchbox/Footer/index.tsx | Adds a styled wrapper around the “Powered by” link section. |
| apps/site/components/Common/Searchbox/Footer/index.module.css | Adjusts footer layout (gap) and introduces .poweredByContainer styling. |
Comments suppressed due to low confidence (1)
apps/site/components/Common/Searchbox/Footer/index.module.css:13
align-baselineis the Tailwind utility forvertical-align, which has no effect on a flex container. If the goal here is to control vertical alignment of the footer’s flex children across browsers, replace this with an explicititems-*alignment (e.g.,items-centeroritems-baseline) so the layout doesn’t rely on defaults/no-op utilities.
bg-neutral-100
p-4
align-baseline
lg:justify-between
lg:rounded-b-xl
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
This is a duplicate; the first PR has already received two reviewer approvals. |
2 participants
Description
Fixes a visual alignment issue in the search dropdown footer where the “Orama” logo/text were not vertically aligned, making the footer look off in the search UI.
This change adjusts the footer layout/styles to keep the logo + text aligned consistently across browsers and screen sizes.
Validation
Before :
After :
Related Issues
Fixes #8570
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.