Dun-sin / Code-Magic

All in one styling tool for developers
https://code-magic.vercel.app
MIT License
382 stars 205 forks source link

[BUG] The thumb radius section in Input Range breaks in mobile view. #519

Closed viditagrawal56 closed 1 year ago

viditagrawal56 commented 1 year ago

Description

In mobile view when the 'include thumb radius' and 'include track radius' options are enabled, the input box causes the tickmark icon to stretch and overall it does not look good

Screenshots

Current Behavior:-

image

Expected Behavior:-

image

Additional information

No response

🥦 Browser

Brave

👀 Have you checked if this issue has been raised before?

🏢 Have you read the Contributing Guidelines?

Are you willing to work on this issue?

Yes I am willing to submit a PR!

github-actions[bot] commented 1 year ago

It's great having you contribute to this project by creating an issue

Make sure you are assigned to this before you work on it and you read the Contributing.md file, Thank you! Welcome to the community :nerd_face:

viditagrawal56 commented 1 year ago

Hey @Dun-sin I would like to work on this issue. Please assign it to me.

Dun-sin commented 1 year ago

not an issue, is this from the original website or your local code? image

viditagrawal56 commented 1 year ago

@Dun-sin I am getting this issue on the original website 🤔

viditagrawal56 commented 1 year ago

@Dun-sin I checked on my mobile and on different browsers too.... weird how you don't see it

Dun-sin commented 1 year ago

@Dun-sin I checked on my mobile and on different browsers too.... weird how you don't see it

what other browsers?

viditagrawal56 commented 1 year ago

@Dun-sin Chrome and on Brave which is my default

viditagrawal56 commented 1 year ago

@Dun-sin I checked both on my mobile as well as on desktop in responsive view through developer options

Dun-sin commented 1 year ago

@Dun-sin Chrome

Technically brave and chrome are the same thing, just so you know they are both based on chromium, but i know what the problem is, the problem is the browser. It works on firefox (which I use), doesn't on chromium browsers, that should help you solve it.

will assign it to you, follow the rules as usual

viditagrawal56 commented 1 year ago

@Dun-sin So I should make the changes for only chromium based browser by using -webkit-appearance prefix right?

Dun-sin commented 1 year ago

@Dun-sin So I should make the changes for only chromium based browser by using -webkit-appearance prefix right?

fix it the best way you think possible

Dun-sin commented 1 year ago

:tada: This issue has been resolved in version 2.72.3 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: