style: quick input widget size fix

This commit implements quick-input-widget size change with respect to app size, as well as handling text overflow resulting from this.

Signed-off-by: FernandoAscencio <[email protected]>

packages/monaco/src/browser/monaco-quick-input-service.ts

@@ -95,6 +95,7 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
         this.themeService.initialized.then(() => this.controller.applyStyles(this.getStyles()));
         // Hook into the theming service of Monaco to ensure that the updates are ready.
         StandaloneServices.get(IStandaloneThemeService).onDidColorThemeChange(() => this.controller.applyStyles(this.getStyles()));
+        window.addEventListener('resize',() => this.updateLayout());
     }
 
     setContextKey(key: string | undefined): void {
@@ -176,7 +177,17 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
 
     private initController(): void {
         this.controller = new QuickInputController(this.getOptions());
-        this.controller.layout({ width: 600, height: 1200 }, 0);
+        this.updateLayout();
+    }
+
+    private updateLayout(): void {
+        // Initialize the layout using screen dimensions as monaco computes the actual sizing.
+        // https://github.com/microsoft/vscode/blob/6261075646f055b99068d3688932416f2346dd3b/src/vs/base/parts/quickinput/browser/quickInput.ts#L1799
+        this.controller.layout(this.getClientDimension(),0);
+    }
+
+    private getClientDimension():monaco.editor.IDimension {
+        return {width: window.innerWidth, height: innerHeight}
     }
 
     private getOptions(): IQuickInputOptions {

packages/monaco/src/browser/style/index.css

@@ -99,30 +99,10 @@
 
 /* Monaco Quick Input */
 .quick-input-widget {
-  width: 600px !important;
-  margin-left: -300px !important;
   background-color: var(--theia-quickInput-background) !important;
   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;
-}
-
 .quick-input-list .monaco-list-row.focused {
   background-color: var(--theia-quickInputList-focusBackground) !important;
 }