Repository: vscode
Issue: When cursor moves horizontally, it shows two different behaviors when passing `inlayHints`
Labels: under-discussion,inlay-hints

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- 🕮 Read our guide about submitting issues: https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions -->
<!-- 🔎 Search existing issues to avoid creating duplicates. -->
<!-- 🧪 Test using the latest Insiders build to see if your issue has already been fixed: https://code.visualstudio.com/insiders/ -->
<!-- 💡 Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. -->
<!-- 🔧 Launch with `code --disable-extensions` to check. -->
Does this issue occur when all extensions are disabled?: Yes

<!-- 🪓 If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. -->
<!-- 📣 Issues caused by an extension need to be reported directly to the extension publisher. The 'Help > Report Issue' dialog can assist with this. -->
- VS Code Version: 1.73.1
- OS Version: Ventura 13.0.1

> the screenshots were taken with `code --disabled-extensions`

### A. Behavior when the cursor moves forward (left to right),
<img width="381" alt="when cursor moves forward with inlayHints options 01" src="https://user-images.githubusercontent.com/31783269/203210540-f88ca65b-a9eb-48e7-9266-65ba3bf39f0e.png">
<img width="386" alt="when cursor moves forward with inlayHints options 02" src="https://user-images.githubusercontent.com/31783269/203210567-b2430db7-2ca9-4153-896c-fdc738899d42.png">
<img width="380" alt="when cursor moves forward with inlayHints options 03" src="https://user-images.githubusercontent.com/31783269/203210591-2e010d7d-14d2-4770-90ed-5675cb73701f.png">
As you can see above, the cursor does not pass inlayHints instead of going to the right in front of the letter A of the second `Array`.
However, when you move the cursor in the opposite direction, from right to left, it shows different behavior.

### B. Behavior when the cursor moves backward (right to left),
<img width="382" alt="when cursor moves backward with inlayHints options 01" src="https://user-images.githubusercontent.com/31783269/203211565-2131c34c-80a8-4a69-8928-a4e83c8698c5.png">
<img width="381" alt="when cursor moves backward with inlayHints options 02" src="https://user-images.githubusercontent.com/31783269/203211631-cb646f60-5814-4f31-912b-4774bf045a67.png">
<img width="388" alt="when cursor moves backward with inlayHints options 03" src="https://user-images.githubusercontent.com/31783269/203211667-05a009a8-e760-4ec6-8515-63b694685c77.png">
The cursor stays in front of the letter A on the first move, but on the next move, it passes the opening bracket and it locates before the opening bracket.

### Conclusion
When a cursor moves horizontally, the cursor ignores text that is placed right after the inlay hints.
> from the screenshots
> left to right: letter `A` is ignored because it is placed right after the inlay hint
> right to left: the opening bracket is ignored because it is also placed right after the inlay hint

### Suggestions
- the inlay hints are literally the 'hints' not 'texts' so the cursor should not be blocked by it as you can observe in case A (the behavior in case B should apply to the A case)

## Steps to Reproduce:

1. turn on `inlayHints` options by putting these lines in settings.json of your VSCode
```json
{
  // js ts type annotations
  "javascript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
}
```
2. create `test.(js | ts)` file 
3. write any function that has parameters and return value
4. you see inlayHints displayed
5. put your cursor before or after the inlayHints and move your cursor
6. observe how it behaves differently while moving the cursor left and right horizontally