nuxt / devtools

Unleash Nuxt Developer Experience
https://devtools.nuxt.com
MIT License
2.88k stars 160 forks source link

fix: DevTools layout unusable when zoomed in #639

Closed maritaria closed 3 months ago

maritaria commented 6 months ago

🐛 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:

image

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%)

image

🛠ī¸ 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

maritaria commented 6 months ago

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.

arashsheyda commented 3 months ago

this issue has been resolved by #654