Fix Layout Overflow in Customization Studio Export Panel (#8260)#8261
Conversation
|
@kanishka-2007-tech is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
This pull request resolves a layout issue where export buttons were overlapping with the Advanced Settings panel, enhancing the user interface's responsiveness. It's great to see improvements in usability! Additionally, you might find it useful to consider the recent decisions regarding export options and timezone normalization, as they relate to user experience enhancements. Keep up the good work! |
retenta-bot
Bot
changed the title
📦 Next.js Bundle Size Report (Gzipped Sizes)✨ No significant bundle size changes detected. 📊 Summary of Totals
|
Aamod007
added
level:beginner
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
Thanks for fixing the layout overflow! Adding \ lex-wrap\ is a simple but effective fix to ensure the export panel controls don't break on smaller screens.
The code looks good and the checks are passing!
Label Justification:
- \level:beginner: Assigned based on 1 file changed (a simple CSS utility class addition).
- \quality:clean: A clean, straightforward fix that addresses the specific issue without over-engineering.
- \ ype:bug: Fixes a layout overflow bug.
- \mentor:Aamod007: Assigned as required.
JhaSourav07
added
the
gssoc:approved
|
🎉 Congratulations @kanishka-2007-tech! Your PR has been successfully merged. 🚀 Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.
Keep building! 💻✨ |
3 participants
Description
This PR fixes the layout issue in the Customization Studio where the export action buttons could overflow into the Advanced Settings panel.
The action button container now wraps its children when horizontal space is limited, preventing overlap with the Width, Height, and Grace Days controls while maintaining a clean responsive layout.
Changes Made
Added flex wrapping to the export action button container.
Ensured buttons automatically move onto a new line when space is constrained.
Preserved consistent spacing between wrapped buttons.
Prevented the button group from overflowing into the adjacent settings panel.
Improved responsiveness across different viewport sizes.
Fixes #8260
Pillar
Visual Preview
Checklist before requesting a review:
CONTRIBUTING.mdfile.localhost:3000/api/streak?user=YOUR_USERNAME).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).feat(themes): ...,fix(calculate): ...).README.mdif I added a new theme or URL parameter.