fix: DevTools layout unusable when zoomed in

[maritaria]

🐛 The bug

I'm on Windows 11, and have set my UI scaling ("Make everything bigger") to 150%. My eyesight is not great and on my particular laptop this makes the UI much more pleasant to use.

However, devtools renders as such:

The checkboxes can be clicked but the "Get started" button is not clickable.

Setting the FireFox zoom to 67% creates a workable UI again (150% * 66.666% = 100%)

🛠️ To reproduce

New project, replace NuxtWelcome in app.vue with a div or something. (cannot share link because is OS interaction bug)

🌈 Expected behavior

The interactive UI elements can be clicked

ℹ️ Additional context

• Windows 11
• Setting "Make everything bigger" is 150%
• Using FireFox browser, v123.0.1
• Browser zoom is at 100%.

[maritaria]

The checkboxes are probably positioned absolutely at the bottom; and the panel itself has no vertical scroll setup.
Might I suggest a column flexbox, with two elements: the main body of the panel and a footer containing the checkboxes. Then set the main body to grow. Then prevent shrinking on both the main and the footer containers, and finally set vertical overflow to scroll. Then you will have accounted for various vertical display heights and the flexbox will make sure that the footer is pushed to the bottom if there is extra space, otherwise the vertical scroll will kick in rather than having overlaps.