updated headingStyle for mobile screens in quickStartFilter

[imdeveshshukla]

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

• Bug fix (non-breaking change which fixes an issue).

How Has This Been Tested?

• 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:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.

[Copilot]

Pull Request Overview

This PR improves mobile responsiveness of the "✨ AI Suggested Sample Apps" heading in QuickstartFilter.js by making the heading style dynamically adjust based on screen width. The changes reduce margin and font size on mobile devices (< 480px) for better spacing and readability.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[Achanandhi-M]

Hey @imdeveshshukla can you please share a video it will be easy for us to review, also please fix the lint and DCO issues

[imdeveshshukla]

Recording.2025-10-24.004618.mp4

@Achanandhi-M

[Achanandhi-M]

Hey @imdeveshshukla can you please fix the copilot suggestions and also please fix the lint issue

[imdeveshshukla]

Hi @Achanandhi-M, I’ve already fixed the Copilot suggestions and addressed the lint issues. Hopefully, everything should be resolved now. 😊

[Achanandhi-M]

Hey @imdeveshshukla, this PR looks like it’s mainly a styling issue, right? Could you please explain why we need to use useEffect for this change?

Also please fix the lint issue

[imdeveshshukla]

@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]

@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