search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
164.69k stars 29.45k forks source link

Extension detail content escapes editor #231439

Open Tyriar opened 1 month ago

Tyriar commented 1 month ago

See the red part - the scroll bar escapes the editor:

Image

Jaimin020 commented 1 month ago

Hi @sandy081 I want to contribute to this extension.

kushal-chavan commented 3 weeks ago

Image

I do not see this issue

peterdanwan commented 1 week ago

Hello @sandy081, I have some steps on how I reproduced the issue + what I think is the problem:

  1. Go to any extensions page, e.g., advanced-new-file and open up a terminal so that the scrollbar of the extensions page bleeds into the terminal. bleeds-into-terminal

  2. Using the developer tools, I found that the "horizontal line" dividing the extensions page content from the terminal is a div with the following CSS classes monaco-sash horizontal (maybe playing with the z-axis to ensure this line is render above everything else might fix the issue):

    monaco-sash horizontal

  3. I think that the file responsible for that style is: workbench.desktop.main.css, which I can't find in the source code for VSCode.

    workbench.html

    workbench.css-missing

Would you happen to know how I might get direct access to the workbench.desktop.main.css file to contribute further?

sandy081 commented 1 week ago

For contribution, please refer to this guide - https://github.com/microsoft/vscode/wiki/How-to-Contribute.

SalerSimo commented 4 days ago

@peterdanwan did you manage to find the workbench.desktop.main.css file?

peterdanwan commented 4 days ago

Hi @SalerSimo, no I wasn't - do you have an idea of where I can locate it?

SalerSimo commented 4 days ago

@peterdanwan I couldn't find it either, but I think we should just locate the code where these specific elements are created and changing some style properties there.

SalerSimo commented 4 days ago

@Tyriar does the scroll bar escape the editor only when there is a terminal open, or are there other cases where this happens?

Tyriar commented 4 days ago

@SalerSimo not sure, that's just the case I spotted it in. It's probably when the panel is showing, not just the terminal.

SalerSimo commented 4 days ago

@Tyriar I might have figured out a way to fix it: I found the element containing the little line that divides the panel from the extension view, and increased its z-index property. It went from this: Image To this: Image

It should work not only for the terminal.

If changing this is enough I can submit a PR.

Tyriar commented 4 days ago

cc @mjbvz since it's a webview, is a z-index fix fine here? Can we not use overflow:hidden to enforce this?