From fe083c689f9154dc0d39953f57bf52de16bec520 Mon Sep 17 00:00:00 2001 From: FernandoAscencio <48699277+FernandoAscencio@users.noreply.github.com> Date: Wed, 31 May 2023 14:54:37 -0400 Subject: [PATCH] monaco: quick input regression fix (#12239) The commit fixes styling regressions in quick-input menus, and aligns the look more closely to VS Code. Signed-off-by: FernandoAscencio --- packages/monaco/src/browser/style/index.css | 46 +++++++++------------ 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css index 552838fcf591b..577f853ef3d4e 100644 --- a/packages/monaco/src/browser/style/index.css +++ b/packages/monaco/src/browser/style/index.css @@ -103,25 +103,6 @@ color: var(--theia-foreground) !important; } -.quick-input-list - .quick-input-list-rows - > .quick-input-list-row - .monaco-icon-label, -.quick-input-list - .quick-input-list-rows - > .quick-input-list-row - .monaco-icon-label - .monaco-icon-label-container, -.quick-input-list - .quick-input-list-rows - > .quick-input-list-row - .monaco-icon-label - .monaco-icon-label-container - > .monaco-icon-name-container { - display: flex !important; - overflow: hidden; -} - .quick-input-list .monaco-list-row.focused { background-color: var(--theia-quickInputList-focusBackground) !important; } @@ -165,8 +146,7 @@ } .monaco-icon-label > .monaco-icon-label-container { - flex: 1 !important; - line-height: 22px; + flex: 1; } .quick-input-list-rows @@ -175,8 +155,9 @@ .monaco-icon-description-container .label-description { font-family: var(--theia-ui-font-family); - font-size: calc(var(--theia-ui-font-size1) * 0.95) !important; + font-size: calc(var(--theia-ui-font-size1) * 0.9) !important; color: var(--theia-foreground) !important; + white-space: inherit; } .quick-input-list-rows @@ -188,16 +169,27 @@ font-family: var(--theia-ui-font-family); font-size: var(--theia-ui-font-size1) !important; color: var(--theia-foreground) !important; - overflow: hidden; - text-overflow: ellipsis; } -.quick-input-list .monaco-icon-label::before { - transform: scale(0.8); +.quick-input-list .monaco-icon-label.codicon, +.quick-input-list .monaco-icon-label.file-icon { + display: flex; + text-align: left; +} + +.codicon-file.default-file-icon.file-icon { + padding-left: 2px; + height: 22px; +} + +.codicon-file.default-file-icon.file-icon::before { + margin-right: 4px; + font-size: var(--theia-ui-font-size1); } .quick-input-list .monaco-icon-label.codicon::before { - padding-top: 3px; + position: relative; + top: 3px; } .quick-input-list .monaco-icon-label.theia-file-icons-js {