add ellipsis to dialog buttons

Author: francescospissu

arduino-ide-extension/src/browser/library/library-list-widget.ts

@@ -203,7 +203,10 @@ class MessageBoxDialog extends AbstractDialog<MessageBoxDialog.Result> {
       const button = this.createButton(text);
       const isPrimaryButton =
         index === (options.buttons ? options.buttons.length - 1 : 0);
-      button.classList.add(isPrimaryButton ? 'main' : 'secondary');
+      button.classList.add(
+        isPrimaryButton ? 'main' : 'secondary',
+        'message-box-dialog-button'
+      );
       this.controlPanel.appendChild(button);
       this.toDisposeOnDetach.push(
         addEventListener(button, 'click', () => {

arduino-ide-extension/src/browser/style/index.css

@@ -109,6 +109,13 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
   background-color: var(--theia-secondaryButton-background);
 }
 
+button.theia-button.message-box-dialog-button {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
 /* To make the progress-bar slightly thicker, and use the color from the status bar */
 .theia-progress-bar-container {
   width: 100%;