feat: add option to hide devtools panel on smaller screen sizes

[stefanobartoletti]

🆒 Your use case

I find the small devtools indicator that permanently resides at the bottom of the screen to be a little intrusive when working on responsive layouts, i.e. when using a browser "device view" to see smaller screens.

On mobile screens, often UI elements are smaller and more difficult to interact with (to test or inspect them) when the devtools indicator is present and gets in the way.

And I would also say that devtools window is not really that useful in these resolutions since the screen is too small to provide information in a viable way.

🆕 The solution you'd like

Give the ability to completely hide devtools when the site is displayed on smaller resolutions (probably the simplest way would be to just hide it from CSS). Maybe this could be optional so the user can choose whether it has to be hidden or not, and maybe use three generic "mobile", "tablet" and "desktop" breakpoints for fine-tuning.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

[arashsheyda]

we already support this feature! if you have DevTools enabled in your nuxt.config.ts

devtools: {
    enabled: true,
  },

then you can go to settings tab and make sure that Always Show the floating tab is disabled. also Minimize floating panel on inactive is set to Always

the panel will be hide and you can toggle Devtools by pressing shift + option + D for macos and shift + ctrl alt + D on windows

[stefanobartoletti]

Thanks for your feedback!

I found that on my Linux system the shortcut to activate/deactivate it is Shift + Alt + D.

Besides that, this behavior is slightly different to what I'd like to have, I'm fine with having the indicator always present on desktop and only hiding it on mobile views. I think that for the time being I can resort on using a custom Userscript on my browser.