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

  1. Resize the Display Configuration applet while watching at the right side of the window to observe the buttons shifting
  2. 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

Merge request reports

Loading
Loading