Follow-up changes to mission section ( Follow-up pr to #800 ) #812
Conversation
🎉 All Checks Passed!
✅ Completed Workflows
🚀 This PR is ready for review and can be safely merged to Great work! Your code meets all quality standards. 👏 |
There was a problem hiding this comment.
Pull request overview
This PR introduces desktop-specific positioning adjustments for the overlay cards in the mission section, building on the visual improvements from PR #800. The changes reposition the top-left and bottom-right cards by adjusting their base positioning and adding responsive translate transforms for medium and larger screens.
Changes:
- Adjusted positioning of the top-left "Project Based Learning" card with updated spacing and desktop-specific leftward translation
- Adjusted positioning of the bottom-right "Challenge and Fun" card with updated spacing and desktop-specific rightward translation
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {windowWidth >= 270 && ( | ||
| <motion.div | ||
| className="absolute top-1 left-2 bg-black/60 | ||
| className="absolute top-3 left-1 md:-translate-x-1/3 bg-black/60 |
There was a problem hiding this comment.
The parent container at line 217 has overflow-hidden which will clip the cards when they are translated outside the container boundaries using md:-translate-x-1/3 and md:translate-x-1/3. On desktop screens (md breakpoint and above), these cards will be partially or fully cut off.
To fix this, either:
- Remove
overflow-hiddenfrom the parent div at line 217 (but this may affect the rounded corners on the image) - Move the
overflow-hiddenproperty to apply only to the image element - Remove the translate transforms and adjust the positioning using only left/right values
| {windowWidth >= 270 && ( | ||
| <motion.div | ||
| className="absolute bottom-1 right-2 bg-black/60 | ||
| className="absolute bottom-3 right-5 md:translate-x-1/3 bg-black/60 |
There was a problem hiding this comment.
The parent container at line 217 has overflow-hidden which will clip this card when it is translated outside the container boundaries using md:translate-x-1/3. On desktop screens (md breakpoint and above), this card will be partially or fully cut off.
To fix this, either:
- Remove
overflow-hiddenfrom the parent div at line 217 (but this may affect the rounded corners on the image) - Move the
overflow-hiddenproperty to apply only to the image element - Remove the translate transform and adjust the positioning using only right values
1 participant
As requested by the maintainer, this PR introduces the follow-up changes for the desktop view of the mission section.
This PR is intentionally kept separate from the earlier one to maintain a clean history and clearer review context.
Follow-up PR to : #800
Changes are limited to the desktop view, as mobile updates introduced layout inconsistencies.