fix dialogs sizes

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx

@@ -119,7 +119,7 @@ export class SettingsComponent extends React.Component<
             'Show files inside Sketches'
           )}
         </label>
-        <div className="flex-line">
+        <div className="column-container">
           <div className="column">
             <div className="flex-line">
               {nls.localize(

arduino-ide-extension/src/browser/dialogs/settings/settings-dialog.tsx

@@ -1,9 +1,12 @@
 import * as React from '@theia/core/shared/react';
-import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import {
+  injectable,
+  inject,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
-import { DialogError, ReactWidget } from '@theia/core/lib/browser';
-import { AbstractDialog, DialogProps } from '@theia/core/lib/browser';
+import { DialogError, DialogProps, ReactWidget } from '@theia/core/lib/browser';
 import { Settings, SettingsService } from './settings';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
@@ -12,6 +15,7 @@ import { nls } from '@theia/core/lib/common';
 import { SettingsComponent } from './settings-component';
 import { AsyncLocalizationProvider } from '@theia/core/lib/common/i18n/localization';
 import { AdditionalUrls } from '../../../common/protocol';
+import { AbstractDialog } from '../../theia/dialogs/dialogs';
 
 @injectable()
 export class SettingsWidget extends ReactWidget {
@@ -58,7 +62,8 @@ export class SettingsDialog extends AbstractDialog<Promise<Settings>> {
     @inject(SettingsDialogProps)
     protected override readonly props: SettingsDialogProps
   ) {
-    super(props);
+    super({ ...props, maxWidth: 740 });
+    this.node.classList.add('arduino-settings-dialog-container');
     this.contentNode.classList.add('arduino-settings-dialog');
     this.appendCloseButton(
       nls.localize('vscode/issueMainService/cancel', 'Cancel')
@@ -73,7 +78,9 @@ export class SettingsDialog extends AbstractDialog<Promise<Settings>> {
     );
   }
 
-  protected override async isValid(settings: Promise<Settings>): Promise<DialogError> {
+  protected override async isValid(
+    settings: Promise<Settings>
+  ): Promise<DialogError> {
     const result = await this.settingsService.validate(settings);
     if (typeof result === 'string') {
       return result;

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

@@ -1,8 +1,15 @@
 .p-Widget.dialogOverlay .dialogBlock {
     border-radius: 3px;
-    padding: 0 28px;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
-    min-height: 0px;
+    margin: 15px 20px;
+
+    /* 
+       padding (left + right) = 56px
+       margin (left + right) = 40px
+       total = padding + margin = 96px
+    */
+    max-width: calc(100% - 96px) !important;
+    padding: 0 28px;
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogTitle {

arduino-ide-extension/src/browser/style/settings-dialog.css

@@ -1,10 +1,9 @@
-.arduino-settings-dialog {
-    width: 740px;
+.arduino-settings-dialog-container > .dialogBlock {
+    width: calc(100% - 96px);
 }
 
 .arduino-settings-dialog .content {
     padding: 5px;
-    height: 300px;
 }
 
 .arduino-settings-dialog .flex-line {
@@ -26,8 +25,13 @@
     vertical-align: middle;
 }
 
+.arduino-settings-dialog .column-container {
+    display: flex;
+    gap: 20px;
+}
+
 .arduino-settings-dialog .stretch {
-    width: 100% !important;
+    flex: 1;
 }
 
 .arduino-settings-dialog .flex-line .theia-button.shrink {
@@ -50,14 +54,20 @@
 .additional-urls-dialog .link:hover {
     color: var(--theia-textLink-activeForeground);
 }
+
 .arduino-settings-dialog .react-tabs__tab-panel {
     padding-bottom: 25px;
 }
+
 .arduino-settings-dialog .react-tabs__tab-list {
     display: flex;
     justify-content: center;
 }
 
+.additional-urls-dialog textarea {
+    width: 100%;
+}
+
 .p-Widget.dialogOverlay .dialogBlock .dialogContent.additional-urls-dialog {
     display: block;
 }