microsoft / vscode-dotnettools

This is a feedback repository to capture issues logged for the C# Dev Kit and related extensions from Visual Studio Code
Other
229 stars 12 forks source link

[BUG] Method definition in 'suggest' widget is truncated #1356

Open sliekens opened 2 months ago

sliekens commented 2 months ago

Describe the Issue

When you view the IntelliSense documentation of a C# method in the 'suggest' widget, the method definition is truncated. There is no text wrapping, nor is it possible to scroll horizontally. The only way to view the full method definition is to resize the widget.

Steps To Reproduce

https://github.com/user-attachments/assets/e4c312c8-ece8-4699-8221-4cbb603a70a1

Expected Behavior

I've seen other language providers put the method definition in the header element of the suggest widget, which has a white-space: pre-wrap CSS style, so the method definition will wrap when necessary (and on line breaks).

JS example from https://code.visualstudio.com/docs/editor/intellisense:

(By the way, here the method definitions are displayed in a grey color without syntax highlighting.)

intellisense_docs

Environment Information

Version: 1.92.1 (user setup) Commit: eaa41d57266683296de7d118f574d0c2652e1fc4 Date: 2024-08-07T20:16:39.455Z Electron: 30.1.2 ElectronBuildId: 9870757 Chromium: 124.0.6367.243 Node.js: 20.14.0 V8: 12.4.254.20-electron.0 OS: Windows_NT x64 10.0.22631

webreidi commented 2 months ago

@dibarbet is this something we control or does this need to get moved over to VS Code?

sliekens commented 2 months ago

FWIW, I was hacking around in the VSCode DevTools to see what's going on, I made some observations:

  1. The tokenized method definition has white-space: pre, perhaps it should be updated to pre-wrap in VSCode https://github.com/microsoft/vscode/blob/4f772f55eb548b658ff45b003fdc72a25f368f3e/src/vs/editor/contrib/suggest/browser/media/suggest.css#L430-L432

  2. The C# method definition is not inside the header element of the widget, which is what other language providers do

  3. Moving the method definition into the header element might break the syntax highlighting

dibarbet commented 1 month ago

Indeed, your observations are correct. We can move the method definition into the header, which improves the wrapping a bit. However then the colorization gets lost: image

I'm not sure there is a lot we can do on the extension side, we may need assistance from VSCode here so that we can keep colorization while also improving the wrapping behavior.

sliekens commented 1 month ago

@dibarbet I was thinking to launch a PR for VSCode to change this style from pre to pre-wrap:

https://github.com/microsoft/vscode/blob/4f772f55eb548b658ff45b003fdc72a25f368f3e/src%2Fvs%2Feditor%2Fcontrib%2Fsuggest%2Fbrowser%2Fmedia%2Fsuggest.css#L430-L432

Considering that horizontal overflow is hidden in the widget, pre without wrapping doesn't make a lot of sense to me. But maybe there is a reason I'm not aware of to keep it this way.