monaco: fix quick-input-list styling

[vince-fugnitto]

What it does

Fixes: #10922 (comment).

The pull-request removes superfluous styling from #10544 which caused issues in monaco after the latest upgrade:

1. fixes the peek widget styling

2. fixes the styling of codicons as tail icons in the quick-input

run-task.mp4

How to test

1. confirm that the peek widget styling is correct - (ex: peek definition)
2. confirm that codicons in the quick-input menu work well (ex: run task...)

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

Signed-off-by: vince-fugnitto [email protected]

[msujew]

I noticed that VSCode applies the padding of the .action-item class differently than we do. The action-item padding is actually applied to the action-label class, so we apply padding to codicons inside of monaco twice. We should probably add another rule to account for this:

.action-item .action-label {
  padding: none;
}
/* OR (probably better) */
.monaco-editor .action-item {
  padding: none;
}

Notice how the icon has no rounded border due to the additional padding:

[vince-fugnitto]

@msujew thanks! It seems like the hover of the codicons in the quick-input menu have bigger issues so I'll investigate what is needed there.

[vince-fugnitto]

@msujew I'm struggling a bit with the css in the quick-input for the codicons (action-item), I'm wondering if you would have more luck especially since you nicely improved our tabbars with the new styling.

[msujew]

@vince-fugnitto I can see why you're struggling, using action-item to implement the hover behavior was incorrect in the first place, so I guess that's on me :)

Here's a patch you can apply to fix the behavior. It changes our usage of action-item to be action-label. That automatically fixes the issues in monaco.

[vince-fugnitto]

@msujew thank you for your help! It definitely looks much better, I had confirmed the peek, toolbar, global toolbar and the quick-input menus with your changes.

[msujew]

@vince-fugnitto You're welcome :)

I noticed a minor issue with codicons in the quick-input. Current:

How it should look like:

Notice the top and left padding which is set to 0px due to this css rule. I think after removing it, there's another, additional rule needed:

.quick-input-list .quick-input-list-entry-action-bar .action-label.codicon {
  padding: 2px; /* monaco's own css rules use 0px 2px 2px 2px here which removes the left padding */
}

Everything else looks good 👍

[vince-fugnitto]

@msujew thanks, did you notice that the top-padding for the hover is still off after the changes?

test - added a brighter background to test:

codicon-padding.mp4

[msujew]

@vince-fugnitto Yeah, seems like the monaco rule has higher precedence. I tested it using this rule and this seems to work:

.quick-input-list .quick-input-list-entry-action-bar .action-label.codicon {
  color: var(--theia-foreground) !important;
  padding: 2px !important;
}

And replaced this rule.

[msujew]

Thanks, looks good to me!

• Quick input items (Task: Run task..., Open recent workspace)+
• Quick peek window
• The other tab bar icons still work correctly