Loading
plasmoid: Improve the size and margins of buttons inside of Screen Layout configuration
Reason for the change
The buttons keep shifting, when you resize the window.
This looks really unprofessional.
The leftover from Math.floor throws away the remainder at the end.
After the change the leftover goes into the button widths (±1px) instead into the right margin (±4px).
I also made sure that the buttons are centered by adding right margin (there was only left margin before, now it has both left and right margin)
Test plan
- Resize the Display Configuration applet while watching at the right side of the window to observe the buttons shifting
- Load the fix and observe that the buttons don't jump now
Screenshots or screen recordings
Before the change
| window width | left gap | right gap | button widths | inner gaps |
|---|---|---|---|---|
| 390 | 4px | 0px | 74, 74, 74, 74, 74 | 4, 4, 4, 4 |
| 391 | 4px | 1px | 74, 74, 74, 74, 74 | 4, 4, 4, 4 |
| 392 | 4px | 2px | 74, 74, 74, 74, 74 | 4, 4, 4, 4 |
| 393 | 4px | 3px | 74, 74, 74, 74, 74 | 4, 4, 4, 4 |
| 394 | 4px | 4px | 74, 74, 74, 74, 74 | 4, 4, 4, 4 |
| 450 | 4px | 0px | 86, 86, 86, 86, 86 | 4, 4, 4, 4 |
| 523 | 4px | 3px | 100, 100, 100, 100, 100 | 4, 4, 4, 4 |
| 601 | 4px | 1px | 116, 116, 116, 116, 116 | 4, 4, 4, 4 |
After the change
| window width | left gap | right gap | button widths | inner gaps |
|---|---|---|---|---|
| 390 | 4px | 4px | 73, 73, 74, 73, 73 | 4, 4, 4, 4 |
| 391 | 4px | 4px | 73, 74, 73, 74, 73 | 4, 4, 4, 4 |
| 392 | 4px | 4px | 74, 73, 74, 73, 74 | 4, 4, 4, 4 |
| 393 | 4px | 4px | 74, 74, 73, 74, 74 | 4, 4, 4, 4 |
| 394 | 4px | 4px | 74, 74, 74, 74, 74 | 4, 4, 4, 4 |
| 450 | 4px | 4px | 85, 85, 86, 85, 85 | 4, 4, 4, 4 |
| 523 | 4px | 4px | 100, 100, 99, 100, 100 | 4, 4, 4, 4 |
| 601 | 4px | 4px | 115, 116, 115, 116, 115 | 4, 4, 4, 4 |
Edited by Michal Malinowski