`<DevTools>`: Make body padding optional about jotai-devtools HOT 6 CLOSED

Do you have a CSB that I can play around with? I'd like to avoid adding a new option if possible in this case.

Setting padding-bottom: 0px as !important on userland might be a good workaround for now, I suppose.

body {
  padding-bottom: 0px !important;
}

from jotai-devtools.

Thanks for the CSB! Let me think of other solutions.

I'm not a huge fan of modifying the body's style, it leads to hacks like !important on userland, and it's also a side-effect from the library's point of view. So, I'm inclining towards removing the padding-bottom feature entirely. I think the majority of the users would naturally expect the component to float on top of their content anyways. We could provide a copy-pastable snippet to the users that may need this functionality 🤔

Another temporary workaround (while we land on a proper fix) would be to set the height of #root to 100vh, like this?

#root {
  height: 100vh;
}

BTW, your app looks cool!

from jotai-devtools.

@PrettyCoffee - I released the fix as part of ^0.4.0 🙌 Please feel free to re-open the issue if the problem still persists.

from jotai-devtools.

Here is a somewhat downsized codesandbox example of the problem:
https://codesandbox.io/s/jotai-devtools-padding-owp02c?file=/src/styles.css

That's what I am currently working on (for more context):

What I am trying to do with the devtools is something like this, when pressing a specific key:

I am able to achieve most of these things by using it's css classes and existing props, but the body padding requires me to use !important which I would prefer not to do, since !important is a bad practice in my opinion and not an option for me.

That being said, my problem seems to be pretty specific since I got this 100% height layout. And there is also always the option to use useAtomDevtools, if you prefer not to introduce an option for the padding. 🙂

from jotai-devtools.

Very good point.
Usually I try to avoid height: 100vh; since that can introduce laggy behavior for mobile devices, but this doesn't matter here since the app does not have a scope for mobile devices. Therefore I will just use that for now and wait for the fix, thank you! 🙂

from jotai-devtools.

Working perfectly, thank you!

from jotai-devtools.