The value dragger can get in the way when dealing with long/large numbers

There are two main issues here:

1. The value dragger icon overlaps with the text. The users intention is to try to select or place the cursor at a point on the right hand side of the text field but on hover, the drag icon appears on top of text that the user wanted to select.

https://user-images.githubusercontent.com/16639049/109308254-ab756a80-7839-11eb-8433-9879cf3740fd.mp4

2. The value dragger 'hit' area seems to be too wide. In the video below, I have to go a fair bit to the left before I can select the text.

https://user-images.githubusercontent.com/16639049/109308337-c9db6600-7839-11eb-9e83-484a66198963.mp4

Not sure what the best solution here as if we separate the label, the editable text field is smaller. ie Making it so that the placeholder X never disappears and give the background a different colour.

Another possibility is if the field is already selected, not to show the dragger on hover? Not too keen on this idea though 🤔

Maybe the dragger could only appear below the text field if it's selected?

Start by locating the value dragger component and reproduce the two cases with long or large numbers shown in the issue videos. Check the dragger’s hover and hit-area behavior around the editable text; done means users can place or select text on the right side without the icon obscuring it or intercepting clicks.