fix: align down arrow below Shop Now button#2734
fix: align down arrow below Shop Now button#2734Tomeshwari-02 wants to merge 1 commit intocodervivek5:mainfrom
Conversation
|
Someone is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughA wrapper div with Tailwind utility classes ( Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/User/pages/Home/Home.jsx (1)
236-244:⚠️ Potential issue | 🟡 MinorArrow is not centered below the "Shop Now" button on mobile — the block wrapper is unaffected by the parent's
text-center.
text-centeron the parent only centers inline / inline-block children. The new<div className="w-32 …">is a block-level element, so on mobile it starts at the left edge regardless oftext-center, while the<button>(inline-block) is correctly centered. This leaves the arrow misaligned on the very viewport the issue targets.Additionally, because the button and arrow are independent siblings,
w-32is an arbitrary heuristic — there is no structural guarantee that the arrow's center coincides with the button's center on any viewport.The reliable fix is to co-locate the button and arrow inside a shared flex column so their centers are always aligned:
✨ Proposed fix — wrap button + arrow together
- <button - onClick={scrollToSection} - className="bg-green-700 text-white px-6 sm:px-8 py-2 sm:py-3 rounded-full hover:bg-green-800 transition duration-300" - > - Shop Now - </button> - <div className="w-32 flex justify-center mt-1"> - <DownArrow /> - </div> + <div className="flex justify-center md:justify-start"> + <div className="flex flex-col items-center"> + <button + onClick={scrollToSection} + className="bg-green-700 text-white px-6 sm:px-8 py-2 sm:py-3 rounded-full hover:bg-green-800 transition duration-300" + > + Shop Now + </button> + <DownArrow /> + </div> + </div>
- Mobile: outer
justify-centermirrors the parent'stext-center, centering the column.- Desktop:
md:justify-startleft-aligns the column to match the text above.- Arrow is always directly below the button center because both live in the same
items-centerflex column.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/User/pages/Home/Home.jsx` around lines 236 - 244, The arrow div is a block sibling so it isn't centered by the parent's text-center; wrap the button (onClick={scrollToSection}) and the <DownArrow /> together inside a shared flex column container (e.g. a div with className="flex flex-col items-center justify-center md:justify-start") so the arrow is always centered beneath the button across viewports; remove the arbitrary w-32 wrapper and rely on items-center to align the DownArrow with the button.
🧹 Nitpick comments (1)
src/User/pages/Home/Home.jsx (1)
242-244:DownArrowshows acursor-pointerbut has no click handler wired.The
DownArrowcomponent renders withcursor-pointer, implying interactivity, yet noonClickis passed. ThescrollToSectionfunction is already defined in this component and is the natural handler. Since this PR is already touching this exact area, connecting the two would resolve the UX inconsistency.🔗 Proposed fix — pass scrollToSection to DownArrow
In
src/User/pages/Home/Home.jsx, pass the handler as a prop (update the wrapper per the alignment fix above):- <DownArrow /> + <DownArrow onClick={scrollToSection} />In
src/User/components/DownArrow/downArrow.jsx:-const DownArrow = () => { +const DownArrow = ({ onClick }) => { return ( <img src={Arrow} alt="Down Arrow" - className="w-10 animate-smooth-bounce cursor-pointer" + className="w-10 animate-smooth-bounce cursor-pointer" + onClick={onClick} + role="button" + tabIndex={0} + onKeyDown={(e) => e.key === 'Enter' && onClick?.()} /> ); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/User/pages/Home/Home.jsx` around lines 242 - 244, The DownArrow is rendered with cursor-pointer but no click handler; pass the existing scrollToSection function from Home.jsx into the DownArrow component (e.g., <DownArrow onClick={scrollToSection} />) and ensure DownArrow accepts and forwards that prop (e.g., uses props.onClick on its root element) so the arrow becomes interactive; update the wrapper div rendering of DownArrow in Home.jsx and verify the DownArrow component's prop name (onClick) matches the handler it expects.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/User/pages/Home/Home.jsx`:
- Around line 236-244: The arrow div is a block sibling so it isn't centered by
the parent's text-center; wrap the button (onClick={scrollToSection}) and the
<DownArrow /> together inside a shared flex column container (e.g. a div with
className="flex flex-col items-center justify-center md:justify-start") so the
arrow is always centered beneath the button across viewports; remove the
arbitrary w-32 wrapper and rely on items-center to align the DownArrow with the
button.
---
Nitpick comments:
In `@src/User/pages/Home/Home.jsx`:
- Around line 242-244: The DownArrow is rendered with cursor-pointer but no
click handler; pass the existing scrollToSection function from Home.jsx into the
DownArrow component (e.g., <DownArrow onClick={scrollToSection} />) and ensure
DownArrow accepts and forwards that prop (e.g., uses props.onClick on its root
element) so the arrow becomes interactive; update the wrapper div rendering of
DownArrow in Home.jsx and verify the DownArrow component's prop name (onClick)
matches the handler it expects.
1 participant
Fixes Issue
Closes #2722
Changes proposed
Screenshots
Before:
After:
Note to reviewers
The update only modifies layout-related classes in the hero section.
No functional logic was changed. The fix maintains responsiveness and does not affect other components.
Summary by CodeRabbit