arduino
Fix dialogs UI scalability
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
IDE auto-update dialog
https://user-images.githubusercontent.com/6939054/183592585-33d4c0fc-93d3-44cf-8dae-5bcc9ae127b5.mov
Select Board dialog
https://user-images.githubusercontent.com/6939054/183593554-00628d68-d7df-4a25-9494-eb3cf80f0418.mov
WiFi 101/WiFi NINA Firmware Updater dialog
Upload SSL Root Certificates
And after the changes:
Settings dialog
https://user-images.githubusercontent.com/6939054/183591797-4a0e875a-82f1-4cde-ad15-66846996c6ed.mov
To avoid the '%' symbol unexpectedly going to a new line, I've added a unitOfMeasure prop to the settings-step-input component: a9ed5b570e7ecd318d79105e5a8bf3a87901dc32
IDE auto-update dialog
https://user-images.githubusercontent.com/6939054/183592629-2c28f4a6-c934-4a34-860c-f9c554107f17.mov
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): 553c6fe5eae242b7f40843402d61ab34bc1f8e50
Select Board dialog
https://user-images.githubusercontent.com/6939054/183593514-857ad34b-1397-44ad-9b15-476e2c795ecd.mov
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
Upload SSL Root Certificates
https://user-images.githubusercontent.com/6939054/183594599-907318e6-ccaf-479d-8402-8ba138ab17cf.mov
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)
I've put the PR back in draft because I've decreased the IDE version for testing purposes: https://github.com/arduino/arduino-ide/pull/1311/commits/26cbba6cd6ce3bdeda3f125729e203bbd8e67d00
UPDATE: changes are reverted, PR is ready