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 <[email protected]>

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 {