keploy
updated headingStyle for mobile screens in quickStartFilter
What has changed?
Adjusted the heading style for the “✨ AI Suggested Sample Apps” section in QuickstartFilter.js to improve mobile responsiveness. The headingStyle object now dynamically adjusts marginLeft and fontSize based on the screen width (using window.innerWidth < 480).
This ensures that the header text is properly spaced and sized on smaller devices without affecting the desktop layout.
This PR Resolves #2987
Type of change
- [x] Bug fix (non-breaking change which fixes an issue).
How Has This Been Tested?
- [x] run npm run build and npm run serve to check if the changes are working as expected
Before: Header appeared slightly left-cramped and oversized on mobile.
After: Header spacing and font size adjust automatically for better readability.
Checklist:
- [x] My code follows the style guidelines of this project.
- [x] I have performed a self-review of my own code.
https://github.com/user-attachments/assets/d1380670-42ab-49da-9760-9026278724b9
@Achanandhi-M
Hi @Achanandhi-M, I’ve already fixed the Copilot suggestions and addressed the lint issues. Hopefully, everything should be resolved now. 😊
@Achanandhi-M I used a small custom hook useMediaQuery (which internally uses useEffect) to detect screen width changes dynamically. The reason for using this approach is that it allows the component to reactively update styles at runtime while keeping the existing inline style structure (headingStyle) if you prefer, I can switch to another approach such as using Tailwind’s responsive utilities or simple CSS media queries to handle responsiveness in a cleaner way. Please let me know what you’d recommend.
I’ve also updated the commit message, so the previous linting error should now be resolved. Please let me know if there’s anything else that needs adjustment.
@Achanandhi-M I used a small custom hook useMediaQuery (which internally uses useEffect) to detect screen width changes dynamically. The reason for using this approach is that it allows the component to reactively update styles at runtime while keeping the existing inline style structure (headingStyle) if you prefer, I can switch to another approach such as using Tailwind’s responsive utilities or simple CSS media queries to handle responsiveness in a cleaner way. Please let me know what you’d recommend.
I’ve also updated the commit message, so the previous linting error should now be resolved. Please let me know if there’s anything else that needs adjustment.
@imdeveshshukla A simple media query works fine, and also fix the linter issues
Hey @Achanandhi-M, I’ve updated the PR. Could you please help me with the linting issue, especially the Vale lint one?
Hey @Achanandhi-M, I’ve updated the PR. Could you please help me with the linting issue, especially the Vale lint one?
Vale docs linter is not an actual problem please try to fix the DCO
Hey @Achanandhi-M, I’ve updated the PR. Could you please help me with the linting issue, especially the Vale lint one?
Vale docs linter is not an actual problem please try to fix the DCO
I’ve fixed the DCO issue, please check now.
Hey @Achanandhi-M, please let me know if there is anything else I should update or fix in the PR
@Achanandhi-M Yes, both are different. The class name is used to handle the media queries since we can’t include media queries directly in the inline style attribute in JSX.
Hey @Achanandhi-M , please let me know if there is anything else needed in this pr
@Achanandhi-M Thanks for the review! I’ll revert the font-size change. But without changing it, the heading doesn’t fit well on mobile and wraps awkwardly. How would you prefer this to be handled for small screens?
With Smaller Font Size:
With Current font-size
One more thing i noticed that in bottom next and previous button are also not responsive
Should I fix that in the same PR?