monaco hover popup hidden by the toolbar

[kittaakos]

Bug Description:

When the toolbar is activated using the shortcut Alt/⌥ + T, the layout may become incorrect, causing the monaco editor's hover popup to be hidden. This can make it challenging to read the information displayed in the hover.

Steps to Reproduce:

1. Open theia in Theia and navigate to the packages/property-view/src/browser/resource-property-view/index.ts file (this is just an example; you can use any other file that has code elements triggering a hover in Monaco).
2. Activate the toolbar by pressing Alt/⌥+T.
3. Hover over a code element with validation errors in the monaco editor to trigger the hover popup.
4. Notice that the hover popup is cut off due to the layout of the toolbar.
5. Disable the toolbar with Alt/⌥+T, inspect the popup is not hidden.

Screen.Recording.2025-02-04.at.09.29.07.mov

Currently, it can be difficult to read when the toolbar is visible, depending on the space between the top panel and the popup. This issue arises because the popup's position is calculated relative to the theia-top-panel instead of the main-toolbar, leading to improper placement.

Expected behavior:

See how the popup's rect is correctly adjusted to the theia-top-panel when there is no toolbar.

Screen.Recording.2025-02-04.at.10.05.06.mov

Additional Information

• Operating System:
• Theia Version: 1.58.0

[JonasHelming]

@kittaakos Thank you for the report. As it seems you have already analyzed the issue pretty well, would you be up for a contribution?

[kittaakos]

I investigated the issue and found that it appears to be a minor user interface bug occurring when the toolbar is off.

Proof (when the toolbar is off, the hover popup can overlay the menu with 2 pixels):

Here's the explanation:

Visual Studio Code has different pixel heights for the top and status bars, with the top bar 30px and the bottom bar 24px. In contrast, Theia uses a height of 32px for both the top bar and the toolbar:

theia/packages/core/src/browser/style/menus.css

Line 92 in b752ea6

min-height: var(--theia-private-menubar-height);

theia/packages/core/src/browser/style/menus.css

Line 22 in b752ea6

--theia-private-menubar-height: 32px;

and 22px for the bottom bar:

theia/packages/core/src/browser/style/status-bar.css

Line 18 in b752ea6

--theia-statusBar-height: 22px;

To address this issue, we will need to customize the ContentHoverWidget, which is an instance of ResisabledContentWidget, through the ContentHoverController editor contribution. In the past, it was possible to customize the monaco editor contributions, but I haven't found any examples of this recently.

In theory, the implementation is quite simple, Theia has to adjust the default pixel:

export class MonacoContentHoverWidget extends ContentHoverWidget {
    constructor(
        editor: ICodeEditor,
        contextKeyService: IContextKeyService,
        configurationService: IConfigurationService,
        accessibilityService: IAccessibilityService,
        keybindingService: IKeybindingService
    ) {
        super(editor, contextKeyService, configurationService, accessibilityService, keybindingService);
    }

    protected override  _availableVerticalSpaceAbove(position: IPosition): number | undefined {
        const value = super._availableVerticalSpaceAbove(position);
        // VS Code uses 30 pixel for top height, but Theia uses 32 pixel
        // `#theia-top-panel.min-height` (--theia-private-menubar-height)
        // https://github.com/microsoft/vscode/blob/1430e1845cbf5ec29a2fc265f12c7fb5c3d685c3/src/vs/editor/contrib/hover/browser/resizableContentWidget.ts#L13
        return typeof value === 'number' ? value - 2 : undefined;
    }

    protected override _availableVerticalSpaceBelow(position: IPosition): number | undefined {
        const value = super._availableVerticalSpaceBelow(position);
        // VS Code bottom height is only 20 pixels. but Theia uses 22 pixels
        // `--theia-statusBar-height: 22px`
        // https://github.com/microsoft/vscode/blob/1430e1845cbf5ec29a2fc265f12c7fb5c3d685c3/src/vs/editor/contrib/hover/browser/resizableContentWidget.ts#L14
        return typeof value === 'number' ? value + 2 : undefined;
    }
}

Could you please advise on how to customize a monaco editor contribution to align with Theia's styles and pixel specifications? (I am aware of how the standalone services are registered.) Thank you!

Update

Never mind, I have figured it out.