Developper tools info not showing properly on edges

[StephaneAdeso]

Type: Bug

I am creating a vscode extension and I have encountered the problem that when using the developer tools, when I inspect an element that is very close to the edge of the vscode, the information window is hidden and the information cannot be seen.

VS Code version: Code 1.83.1 (f1b07bd25dfad64b0167beb15359ae573aecd2cc, 2023-10-10T23:48:05.904Z) OS version: Windows_NT x64 10.0.22621 Modes:

System Info

|Item|Value| |---|---| |CPUs|11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz (16 x 2304)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|31.79GB (23.29GB free)| |Process Argv|--crash-reporter-id ccedd11e-cbe3-4aab-835a-b81d8cc295d7| |Screen Reader|no| |VM|0%|

Extensions (41)

Extension|Author (truncated)|Version ---|---|--- codesnap|adp|1.3.4 tsl-problem-matcher|amo|0.6.2 ng-template|Ang|16.1.8 cssrem|cip|3.1.1 continue|Con|0.0.412 vscode-eslint|dba|2.4.2 es7-react-js-snippets|dsz|4.4.3 gitlens|eam|14.4.0 prettier-vscode|esb|10.1.0 code-runner|for|0.12.1 fetch-client|Gan|1.3.0 todo-tree|Gru|0.0.226 Angular2|joh|16.0.1 vscode-peacock|joh|4.2.2 vscode-colorize|kam|0.11.1 git-graph|mhu|1.30.0 isort|ms-|2023.10.1 python|ms-|2023.18.0 vscode-pylance|ms-|2023.10.30 live-server|ms-|0.4.11 vsliveshare|ms-|1.0.5883 vscode-versionlens|pfl|1.9.0 postman-for-vscode|Pos|0.12.1 vscode-thunder-client|ran|2.13.5 fabric8-analytics|red|0.7.0 java|red|1.23.0 vscode-xml|red|0.26.1 vscode-yaml|red|1.14.0 vs-code-prettier-eslint|rve|5.1.0 partial-diff|ryu|1.4.3 errorlens|use|3.14.0 intellicode-api-usage-examples|Vis|0.2.8 vscodeintellicode|Vis|1.2.30 vscode-java-debug|vsc|0.54.0 vscode-java-dependency|vsc|0.23.1 vscode-java-pack|vsc|0.25.14 vscode-java-test|vsc|0.40.0 vscode-maven|vsc|0.42.0 vscode-icons|vsc|12.5.0 JavaScriptSnippets|xab|1.8.0 markdown-all-in-one|yzh|3.5.1 (1 theme extensions excluded)

A/B Experiments

``` vsliv368:30146709 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 vslsvsres303:30308271 vserr242:30382549 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 vscorecescf:30445987 vscod805:30301674 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 pythonvs932:30410667 py29gd2263cf:30856253 vsclangdc:30486549 c4g48928:30535728 dsvsc012:30540252 pynewext54:30695312 azure-dev_surveyone:30548225 3biah626:30602489 89544117:30613380 a9j8j154:30646983 showlangstatbar:30737416 03d35959:30757346 pythonfmttext:30731395 fixshowwlkth:30771522 showindicator:30805244 pythongtdpath:30769146 i26e3531:30792625 gsofa:30866041 pythonnosmt12:30797651 pythonidxptcf:30805731 pythonnoceb:30805159 copilotsettingc:30859502 synctok:30821570 dsvsc013:30795093 dsvsc014:30804076 diffeditorv2:30821572 pythonmpsinfo:30842941 dsvsc015:30845448 pyreplss1:30865275 pythontbext0:30864172 ```

[deepak1556]

Which dock position do you see this issue with ? Can you share a screen recording with exact steps to repro the issue, thanks!

/gifPlease

[vscodenpa]

Thanks for reporting this issue! Unfortunately, it's hard for us to understand what issue you're seeing. Please help us out by providing a screen recording showing exactly what isn't working as expected. While we can work with most standard formats, .gif files are preferred as they are displayed inline on GitHub. You may find https://gifcap.dev helpful as a browser-based gif recording tool.

If the issue depends on keyboard input, you can help us by enabling screencast mode for the recording (Developer: Toggle Screencast Mode in the command palette). Lastly, please attach this file via the GitHub web interface as emailed responses will strip files out from the issue.

Happy coding!

[StephaneAdeso]

It's very easy to reproduce. I am developing a vscode extension. When i debug the extensión and i open the developpers tools and inspect an element that is on the edge, the information panel is hidden behind.

https://github.com/microsoft/vscode/assets/55595063/4fb99539-ddeb-42af-916a-783b9f0888e5

[deepak1556]

Seems to be specific to layout of extension webview, can you share a minimal extension repro. I am unable to repro with welcome page buttons.

[StephaneAdeso]

I just made public my repo so you can check it. Do the same steps as in the video i shared. When you finish i will make the repo private again. You can use the 'develop' branch. https://github.com/StephaneAdeso/adeso-seeker

[vscodenpa]

Hey @deepak1556, this issue might need further attention.

@StephaneAdeso, you can help us out by closing this issue if the problem no longer exists, or adding more information.

[vscodenpa]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!