fix(ui): optimize Quickstart layout for mobile

[Gagan202005]

Description

This PR addresses a UI/UX issue on the Quickstart → Recommendation page where the layout was cluttered on mobile devices. Previously, the component rendered full cards (with text, borders, and shadows) regardless of screen size, which took up significant vertical space and required excessive scrolling on smaller screens.

Changes implemented in QuickstartFilter.js:

• Introduced CSS media queries for screens smaller than 768px.
• Hides text labels on mobile to reduce clutter.
• Removes card styling (borders, backgrounds, shadows) on mobile buttons to display a clean, icon-only interface.
• Adds a visual selection ring directly to the icon wrapper on mobile to clearly indicate the active state (replacing the card border highlight used on desktop).

This PR Resolves keploy/keploy#3001

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as expected).
• Documentation update (if none of the other choices apply).

How Has This Been Tested?

1. Ran the project locally using npm start.
2. Navigated to the Quickstart → Recommendation page.
3. Used Chrome DevTools (Device Toolbar) to simulate mobile devices (Pixel 7, iPhone SE).
4. Verified that:
   • Text labels (.selection-label) are hidden on screens < 768px.
   • The rectangular card background/border is removed.
   • Clicking an icon adds a visible orange ring around the circular icon wrapper.
5. Switched back to Desktop view (> 768px) to verify that the original layout remains unaffected.

Screenshots

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have added comments to the new CSS media queries to explain the mobile logic.
• My changes generate no new warnings in the console.
• The UI is responsive and usable on both mobile and desktop.

[github-actions]

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

[Achanandhi-M]

Hey @Gagan202005, the UI is currently looking good. I don’t see any issues with the quickstart recommendation—you can refer to the screenshot for confirmation.