Fix: Delete button click issue, mobile responsiveness, and PDF single…#958
Conversation
|
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Incredible work, @akshay0611! 🚀
🔥 Welcome to DevDisplay — A space where developers and all the tech enthusiasts can connect, collaborate, code, create, and conquer in the tech ecosystem.
At DevDisplay, we don't just welcome contributors—we celebrate them! 🎊 Because here, your ideas matter. Your code matters. You matter. 🚀
💡 This isn't just about adding your profile. It's about making an impact, showcasing your skills, and standing out in the developer ecosystem.
Think of DevDisplay as your own project, not just another open-source contribution. We're not just a platform—we're a global movement redefining the tech space. Our vision is to be the go-to platform for developers and tech enthusiasts worldwide.
🚀 Innovation has no limits!
We encourage you to think beyond the ordinary. Got a revolutionary idea? Spot a gap in the tech world? DevDisplay can be the solution! We want contributors like you to dream big, build bold, and bring game-changing features to life.
🌍 DevDisplay is more than an open-source project. It's a global tech hub, a thriving community, and a platform where you can connect, collaborate, code, create, and conquer.
🔥 Keep pushing boundaries—we're just getting started!
If you put your 💯 into creating something exceptional, you could even join our Global Core Team and also you can lead DevDisplay as a Community Leader in your area, college, or university.
💡 Your issue is now in review!
- Our maintainers will soon review your PR and provide feedback/suggestions. 🚀 Stay tuned, stay engaged, and get ready to bring your ideas to life! 💡
---
📢 Have ideas to improve DevDisplay? Let us know! We're always looking for innovative minds to shape the future of tech.
💬 Join the conversation. Grow with the community. You belong here. 🙌
- 🚀 Join DevDisplay GitHub DevDisplay Discussions: DevDisplay Discussions
📢 Join Our Global Developer Communities & Connect with Innovators:
- 🚀 Join DevDisplay Discord Community: Discord Community
- 📱 Join DevDisplay WhatsApp Community: WhatsApp Community
📩 Need Help? Reach Out to the Team:
- 📧 Organization Email: team@devdisplay.org
💻 Follow DevDisplay on Social Media & Stay Updated:
- GitHub Organization: DevDisplay GitHub
- LinkedIn: DevDisplay LinkedIn
- Twitter (X): DevDisplay Twitter
- Instagram: DevDisplay Instagram
🔥 🌟 Thank You for Being Here!
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi there! This issue is still open. We are looking forward to your response. |
codeaashu
added
DevDisplay
There was a problem hiding this comment.
Pull Request Overview
This PR addresses three main issues: ensuring the delete button is interactive, improving mobile responsiveness of the Resume Builder UI, and preventing short resumes from splitting into multiple PDF pages. Key changes include:
- CSS updates to remove fixed heights/overflows and add responsive styles.
- PDF generator tweaks for tighter spacing, link rendering, and consistent font sizing.
- Sidebar and ResumeBuilder components extended with mobile menu open/close logic.
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ResumeBuilder/utils/pdfGenerator.js | Adjusted line heights, font sizes, spacing, and enhanced link rendering |
| src/components/ResumeBuilder/styles/ResumeBuilder.css | Removed fixed-height overflow rules for responsive layout |
| src/components/ResumeBuilder/styles/FormSections.css | Added box-sizing reset and fine-tuned mobile form layout |
| src/components/ResumeBuilder/Sidebar.jsx | Introduced mobile menu toggle, desktop collapse state, and updated icons |
| src/components/ResumeBuilder/ResumeBuilder.jsx | Added viewport detection, mobile menu button, and updated step status |
| const pageWidth = doc.internal.pageSize.getWidth(); | ||
| const contentWidth = pageWidth - 2 * margin; | ||
| const bodyFontSize = 10; | ||
| const wrappedLineHeight = 3.5; |
There was a problem hiding this comment.
[nitpick] There are many magic numbers for line heights and spacings throughout this file. Consider centralizing these values (e.g., line heights, font sizes, margins) into top-level constants or a config object to improve readability and ease future adjustments.
| doc.setTextColor(0, 0, 0); | ||
| doc.text(separator, currentLinkX, linkTextInitialY); | ||
| currentLinkX += doc.getTextDimensions(separator, { fontSize: 9 }).w; | ||
| } | ||
|
|
||
| doc.setTextColor(rgbLinkColor[0], rgbLinkColor[1], rgbLinkColor[2]); | ||
| doc.textWithLink(linkInfo.text, currentLinkX, linkTextInitialY, { url: linkInfo.url }); |
There was a problem hiding this comment.
[nitpick] The logic for rendering and styling links is repeated in multiple spots. You could extract a helper function (e.g., renderLinkLine(doc, text, x, y, options)) to encapsulate setting color, adding link, and resetting color to reduce duplication.
| doc.setTextColor(0, 0, 0); | |
| doc.text(separator, currentLinkX, linkTextInitialY); | |
| currentLinkX += doc.getTextDimensions(separator, { fontSize: 9 }).w; | |
| } | |
| doc.setTextColor(rgbLinkColor[0], rgbLinkColor[1], rgbLinkColor[2]); | |
| doc.textWithLink(linkInfo.text, currentLinkX, linkTextInitialY, { url: linkInfo.url }); | |
| renderLinkLine(doc, separator, currentLinkX, linkTextInitialY); | |
| currentLinkX += doc.getTextDimensions(separator, { fontSize: 9 }).w; | |
| } | |
| renderLinkLine(doc, linkInfo.text, currentLinkX, linkTextInitialY, { url: linkInfo.url, color: rgbLinkColor }); |
| }} | ||
| aria-label={isMobileView ? 'Close menu' : desktopCollapsed ? 'Expand sidebar' : 'Collapse sidebar'} | ||
| > | ||
| {isMobileView ? <X size={18} /> : desktopCollapsed ? <Menu size={18} /> : <X size={18} />} |
There was a problem hiding this comment.
[nitpick] Using the same <X> icon for both opening/closing the mobile menu and collapsing the desktop sidebar may confuse users. Consider using directional chevrons (e.g., ChevronLeft/ChevronRight) to clearly indicate expand/collapse actions on desktop.
| {isMobileView ? <X size={18} /> : desktopCollapsed ? <Menu size={18} /> : <X size={18} />} | |
| {isMobileView ? <X size={18} /> : desktopCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />} |
| :root { | ||
| } | ||
|
|
There was a problem hiding this comment.
This empty :root {} selector at the top of the file appears unused and can be removed to reduce clutter.
| :root { | |
| } |
| @@ -1,3 +1,7 @@ | |||
| * { | |||
There was a problem hiding this comment.
[nitpick] A global * { box-sizing: border-box; } reset may unintentionally override styles elsewhere in the app. Consider scoping this rule to only the form section container or confirming it aligns with the global reset policy.
| * { | |
| .form-card, .form-card * { |
Description
Fixed issues related to:
Related Issues
Closes #957
Changes Proposed
Checklist
Screenshots
Mobile Resposive
More ATS friendly Resume Under a single page
Note to reviewers
I'm open to discussing and making any changes you suggest.
I'll also continue to work on fixing any other issues I come across in the Resume Builder in the near future.