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. There are issues regarding specific cases with the overflow handling. Signed-off-by: FernandoAscencio <[email protected]>
eclipse-theia · Jan 24, 2023 · c19b5de · c19b5de
1 parent bf600d7
commit c19b5de
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/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: window.innerHeight };
     }
 
     private getOptions(): IQuickInputOptions {

diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css
@@ -99,8 +99,6 @@
 
 /* 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;
 }
@@ -121,6 +119,7 @@
   .monaco-icon-label-container
   > .monaco-icon-name-container {
   display: flex !important;
+  overflow: hidden;
 }
 
 .quick-input-list .monaco-list-row.focused {
@@ -170,15 +169,6 @@
   line-height: 22px;
 }
 
-.quick-input-list
-  .quick-input-list-rows
-  > .quick-input-list-row
-  .monaco-icon-label
-  .monaco-icon-label-container
-  > .monaco-icon-name-container {
-  flex: 0 !important;
-}
-
 .quick-input-list-rows
   .quick-input-list-row
   .monaco-icon-label
@@ -198,6 +188,8 @@
     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 {