Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Editor popups get cut off outside of view #14290

Closed
sgraband opened this issue Oct 11, 2024 · 6 comments · Fixed by #14695
Closed

Editor popups get cut off outside of view #14290

sgraband opened this issue Oct 11, 2024 · 6 comments · Fixed by #14695

Comments

@sgraband
Copy link
Contributor

Bug Description:

I've noticed that popups, such as the suggestion/signature helper, are confined to the space of the code editor. When the popups extend towards other views, such as the bottom panel or the right panel, they are cut off rather than rendered in full. This limits the available space unnecessarily, as the popup could instead be rendered above the adjacent panel or viewport, avoiding this cutoff issue.

Is there a technical reason for this behavior, or is this something that can be improved to utilize the available space more effectively?

Screenshot:
image_720

Steps to Reproduce:

  1. Open a monaco editor
  2. Trigger the suggestions (Ctrl + Space)
  3. Make the editor view smaller so that the suggestion popup does not fit
  4. Notice that the popup is being cutoff

Additional Information

  • Operating System: Ubuntu 22.04
  • Theia Version: Theia 1.54.0
@tsmaeder
Copy link
Contributor

@sgraband there is a service injected into the monaco editor instance which manages the confinement of the popover elements like menus and hovers. Not sure why this is not working.

@hannescmarits
Copy link

I think VS Code has the same problem.

@sgraband
Copy link
Contributor Author

@tsmaeder I had a quick look and found this, which handles context menus. In this case, the context menu appears over the border of the editor view as expected.

However, I couldn't locate a similar injection for suggestions. Could you point me to where the suggestion list is rendered? Then i could take a look if this could easily be done in a similar way.

@tsmaeder
Copy link
Contributor

@sgraband sorry, but I don't know. You'll have to dig through the VS code source to find the place.

@msujew msujew mentioned this issue Jan 6, 2025
Closed
@hsnoil
Copy link

hsnoil commented Jan 6, 2025

If you disable/remove the z-index: 0 on .p-SplitPanel-child , .p-DockPanel and .p-DockPanel-widget it works properly, though that likely has other consequences. But that may help narrow things down.

@msujew msujew mentioned this issue Jan 6, 2025
Merged
1 task
@msujew
Copy link
Member

msujew commented Jan 6, 2025

@hsnoil Thanks for the info! I've filed #14695 to fix this. Disabling the z-index property doesn't seem to have any side effects as far as I could tell. I'm not even sure why it's there in the first place (provided by phosphor.js, not our own css).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix z-index overlay issue in dock panels eclipse-theia/theia
5 participants
@msujew @tsmaeder @hannescmarits @sgraband @hsnoil