Motivation

As explained in #1309, our dialogs might become distorted when scaling up the UI (from the settings or using the shortcut CMD/CTRL + '+').

I've made some fixes in order to make the interface readable and usable with an interface that is scaled up to 200%, with a minimum window size of 450px in width and 300px in height. Maybe they won't look beautiful, but every dialog should be at least usable and readable up to that size.

Change description

Here's a list of screen captures before the changes, with an interface scale of 200% and a window size of 450x300:

Settings dialog

Screenshot 2022年08月09日 at 09 32 25

IDE auto-update dialog

Select Board dialog

WiFi 101/WiFi NINA Firmware Updater dialog

Screenshot 2022年08月09日 at 09 46 08

Upload SSL Root Certificates

Screenshot 2022年08月09日 at 09 48 34

And after the changes:

Settings dialog

To avoid the '%' symbol unexpectedly going to a new line, I've added a unitOfMeasure prop to the settings-step-input component: a9ed5b5

IDE auto-update dialog

I needed to apply a major refactor on this dialog in order to move the buttons from the content of the dialog (which is the inner react component) to the footer (which is part of the AbstractDialog inherited from Theia): 553c6fe

Select Board dialog

Here I've decided to save some space when the size of the window is very small by adding a media query that removes the upper text paragraph on screen heights smaller than 400px: f8f07ea62be6d96191759c89da26c7fb5327c0fff8f07ea62be6d96191759c89da26c7fb5327c0ff

WiFi 101/WiFi NINA Firmware Updater dialog

Screenshot 2022年08月09日 at 09 45 54

Upload SSL Root Certificates

Other information

Fixes #1309

Reviewer checklist

• PR addresses a single concern.
• The PR has no duplicates (please search among the Pull Requests before creating one)
• PR title and description are properly filled.
• Docs have been added / updated (for bug fixes / features)