fix: made input range responsive in mobile view

[viditagrawal56]

Fixes Issue

My PR closes #519

👨‍💻 Changes proposed(What did you do ?)

• Fixed the issue of stretching and misalignment of the 'include thumb radius' and 'include track radius' options in mobile view for chromium based browsers.

✔️ Check List (Check all the applicable boxes)

• [X] My code follows the code style of this project.
• [X] This PR does not contain plagiarized content.
• [X] The title and description of the PR is clear and explains the approach.

Note to reviewers

📷 Screenshots

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
code-magic	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2023 9:22am

[viditagrawal56]

@Dun-sin when the screen size < 1000 px the width of the checkbox suddenly becomes half of the original width, and I can't find why it does that. Also you said that you don't see the issue on Firefox, but I faced this issue on Firefox too. So I just doubled the width of the checkbox in the media query of max-width 1000.

Let me know if you need any changes.

[Dun-sin]

your PR makes it worse on firefox:

[viditagrawal56]

@Dun-sin That's really weird. Because for me on Firefox it resolves the issue. I have attached Screen shots below.

Desktop view on Firefox :-

Mobile view on Firefox :-

[viditagrawal56]

@Dun-sin Works even in the deployment preview

[viditagrawal56]

@Dun-sin I found a new fix. I set the flex-shrink to 0 and it seems to fix the issue. Can you please check on your browser?

[Dun-sin]

@Dun-sin I found a new fix. I set the flex-shrink to 0 and it seems to fix the issue. Can you please check on your browser?

@viditagrawal56 it works now

[Dun-sin]

:tada: This PR is included in version 2.72.3 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: