feat:dashboard-cards-hover-animation - #163
Open
Parshant-12 wants to merge 1 commit into
Open
Conversation
🤖 CodeAnt AI — Review Status
|
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
github-actions
Bot
added
AI
codeant-ai
Bot
added
size:M
📝 WalkthroughWalkthroughThe Dashboard now adds hover animations to KPI cards, collision cards, the AI reasoning panel, and agent reasoning entries. Existing risk-based visualization and reasoning content remain unchanged. ChangesDashboard interaction styling
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| <motion.div | ||
| key={idx} | ||
| whileHover={{ y: -2 }} | ||
| whileHover={{ y: -3, scale: 1.02 }} |
There was a problem hiding this comment.
Suggestion: The hover transform is unconditional and does not respect the user's prefers-reduced-motion setting. Users who request reduced motion will still see the KPI card lift and scale on pointer hover; the collision cards and reasoning entries add the same regression. Use useReducedMotion or an equivalent media-query guard to disable these hover animations when reduced motion is preferred. [possible bug]
Severity Level: Major ⚠️
- ⚠️ Dashboard KPI cards ignore reduced-motion preferences.
- ⚠️ Collision timeline cards still lift and scale.
- ⚠️ AI reasoning entries still shift horizontally.
- ⚠️ Accessibility behavior differs from existing motion-aware components.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/Dashboard.tsx
**Line:** 145:145
**Comment:**
*Possible Bug: The hover transform is unconditional and does not respect the user's `prefers-reduced-motion` setting. Users who request reduced motion will still see the KPI card lift and scale on pointer hover; the collision cards and reasoning entries add the same regression. Use `useReducedMotion` or an equivalent media-query guard to disable these hover animations when reduced motion is preferred.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/pages/Dashboard.tsx`:
- Around line 222-226: Add top padding to the scroll container that wraps the
cards rendered by the motion.div elements, ensuring enough vertical space for
the whileHover y: -3 transform and shadow without clipping. Preserve the
existing horizontal scrolling and card layout behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 19ca9907-7499-42eb-9a26-0a1f09a9bfcb
📒 Files selected for processing (1)
frontend/src/pages/Dashboard.tsx
Comment on lines
+222
to
+226
| <motion.div | ||
| key={conj.id} | ||
| gradientColor={ | ||
| conj.risk_level === 'CRITICAL' || conj.risk_level === 'HIGH' | ||
| ? '#FF3B30' | ||
| : conj.risk_level === 'MEDIUM' | ||
| ? '#FF9500' | ||
| : '#00e5ff' | ||
| } | ||
| gradientSize={200} | ||
| gradientOpacity={0.3} | ||
| className="w-64 sm:w-72 shrink-0 rounded-xl border border-white/10" | ||
| fillClassName="bg-[#0A0F1A]" | ||
| whileHover={{ y: -3, scale: 1.02 }} | ||
| transition={{ duration: 0.2, ease: 'easeOut' }} | ||
| className="shrink-0" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the collision hover transform inside the scroll container.
Line 202 has no top padding. The y: -3 transform can clip the card top edge and elevated shadow at the scrollport boundary. Add vertical space above the cards.
Proposed fix
- <div className="flex-1 overflow-x-auto pb-4 custom-scrollbar">
+ <div className="flex-1 overflow-x-auto pt-3 pb-4 custom-scrollbar">🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/Dashboard.tsx` around lines 222 - 226, Add top padding to
the scroll container that wraps the cards rendered by the motion.div elements,
ensuring enough vertical space for the whileHover y: -3 transform and shadow
without clipping. Preserve the existing horizontal scrolling and card layout
behavior.
krishkhinchi
reviewed
Aug 3, 2026
krishkhinchi
left a comment
krishkhinchi
left a comment
Member
There was a problem hiding this comment.
Please attach screenshots/screen recording of the cards hover animation along with your PR. Thanks!
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
2 participants
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.
User description
Summary
This PR adds smooth, lightweight hover animations to the main dashboard cards in Dashboard.tsx to improve visual interactivity while keeping performance high and avoiding layout shifts.
Specifically:
Related Issue
Fixed #82
Type of Change
Screenshots / Screen Recordings
N/A — Added GPU-accelerated hover lift (y, scale), border glow, and shadow elevation across dashboard cards.
Testing Performed
Breaking Changes
NO
Checklist
ECSoC26 Submission
ECSoC26-L1– BeginnerECSoC26-L2– IntermediateECSoC26-L3– AdvancedCodeAnt-AI Description
Add responsive hover feedback across dashboard cards
What Changed
Impact
✅ Clearer card interactivity✅ Easier scanning of collision risks✅ More responsive dashboard navigation💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit