Trying to transition a sidebar that is on the right using margin, but the transition is creating additional layout shifting

[chrber04]

Hi!

I am trying to transition a sidebar that is on the right using margin, but the transition is creating additional layout shifting (it also is more "twitchy/abrupt"). It is much more smooth without the transition component, but I want to change it depending on screen size & it would be the cleanest solution to use Transition. On smaller devices I want to use translate-x (so it just overlays the other content) and on larger devices, I want to use margin (so it takes up space)

What am I doing wrong?

Code with Transition component:

     <Transition
      show={chatIsOpen}
      as="aside"
      className="relative z-40 flex flex-shrink-0"
      aria-label="Chat"
      enter="transition-all ease-in-out duration-300"
      enterFrom="-mr-72"
      enterTo="mr-0"
      leave="transition-all ease-in-out duration-300"
      leaveFrom="mr-0"
      leaveTo="-mr-72"
    >
      <div className="relative flex flex-col w-72">
        <InnerChat />
      </div>
    </Transition>

Code without transition component:

     <aside
      aria-label="Chat"
      className={classNames(
        !chatIsOpen ? "-mr-72" : "mr-0",
        "relative z-40 flex flex-shrink-0 transition-all ease-in-out duration-300"
      )}
    >
      <div className="relative flex flex-col w-72">
        <InnerChat />
      </div>
    </aside>

Here's an album showcasing it:
https://imgur.com/a/P9NIeSy

[chrber04]

Solved the problem. It was unrelated to the Transition component!

I removed a scroll dummy that was inside the chat and now it works perfectly fine. Spent way too long time on this lol!