fix: Gallery Features overflow and hover delay#14
fix: Gallery Features overflow and hover delay#14VasuS609 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
bug
WalkthroughOptimized the HowItWorks gallery component's responsive grid layout with enhanced breakpoint coverage (xl, 2xl), reduced hover delay from 1000ms to 200ms for improved UX, and added overflow containment with text wrapping to prevent content spillover in feature cards. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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/Pages/HowItWorks/HowItWorks.tsx (1)
57-72:⚠️ Potential issue | 🟠 MajorAdd cleanup for pending hover timers on component unmount.
Timers scheduled in
onMouseEnter(line 59) lack unmount cleanup. A pending timeout can callsetActiveStepafter the component unmounts, causing stale state update warnings. Add auseEffectcleanup to clear all pending timers:Fix
-import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; @@ const [activeStep, setActiveStep] = useState<number | null>(null); const hoverTimers = useRef<Record<number, number | null>>({}); + + useEffect(() => { + return () => { + Object.values(hoverTimers.current).forEach((t) => { + if (t != null) clearTimeout(t); + }); + }; + }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/Pages/HowItWorks/HowItWorks.tsx` around lines 57 - 72, Add an unmount cleanup that clears any pending hover timeouts stored in hoverTimers to prevent setActiveStep being called after the component unmounts: create a useEffect in the component (referencing hoverTimers and setActiveStep/activeStep) that returns a cleanup function which iterates hoverTimers.current, calls clearTimeout for any non-null timer, and sets those entries to null; this ensures all pending timers set in the onMouseEnter handler are cancelled on unmount.
🤖 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/Pages/HowItWorks/HowItWorks.tsx`:
- Around line 57-72: Add an unmount cleanup that clears any pending hover
timeouts stored in hoverTimers to prevent setActiveStep being called after the
component unmounts: create a useEffect in the component (referencing hoverTimers
and setActiveStep/activeStep) that returns a cleanup function which iterates
hoverTimers.current, calls clearTimeout for any non-null timer, and sets those
entries to null; this ensures all pending timers set in the onMouseEnter handler
are cancelled on unmount.
1 participant
Fixes: #13
Small UX polish focused on the How It Works gallery section: quicker hover response, cleaner text behavior, and more stable responsive layout.
Screen.Recording.2026-03-03.034239.mp4
Small UX polish focused on the How It Works gallery section: quicker hover response, cleaner text behavior, and more stable responsive layout.
Changes (Very Brief)
Scope is intentionally minimal: 1 file updated, 5 insertions / 5 deletions.
File: [HowItWorks.tsx]Checklist
https://github.com/user-attachments/assets/d20f9964-d6b3-4c87-9704-2f42df53756f
Summary by CodeRabbit