[FEATURE]: Make NoticeCards Sticky to Bottom Right #236
Description
📧 Contact Details
No response
🎯 Problem to Solve
The NoticeCard components were rendering correctly but were not fixed to the bottom-right corner of the viewport. They appeared within the normal document flow instead of staying visible like a typical “toast” or notification card seen on most websites.
💭 Proposed Solution
Update the NoticeCard component to use a fixed position (fixed bottom-4 right-4) so each notice remains anchored to the bottom-right of the screen regardless of scroll position.
Adjust GSAP animation to target the component’s own ref instead of a global class to prevent conflicts when rendering multiple notices.
🔄 Alternatives Considered
Using position: sticky was tested, but it depends on scrollable parent containers and does not behave as expected for persistent notifications.
Manually offsetting cards within the parent component was possible but less maintainable compared to fixed positioning at the component level.
🛠️ Implementation Details
Replaced .notice-card animation selector with box_ref.current to ensure each card animates independently.
Added Tailwind classes fixed bottom-4 right-4 for proper viewport anchoring.
Added optional offset prop to allow multiple notices to stack vertically.
Improved the close animation to fade out smoothly and hide the card with display: none on completion.
🔥 Priority
Medium (would improve my experience)
👤 User Type
Visitors, Students
🖼️ Mockups or Examples
No response
🤝 Community
- I have joined the Discord community for discussions
- I've searched for similar feature requests before creating this
- I'm willing to help implement this feature (not required)
📜 Code of Conduct
- I agree to follow this project's Code of Conduct