Modal opening causes layout shift - debugging CSS issue

This is a classic CSS issue that happens when modals open - it's almost certainly caused by the scrollbar disappearing, not something specific to Sanity Studio or Tailwind.

What's happening:

When a modal opens, it typically sets overflow: hidden on the body to prevent background scrolling. This removes the scrollbar, causing the content to shift horizontally by the scrollbar width (usually 15-17px). It's jarring because the content suddenly jumps to fill that space.

Quick fix - Force scrollbar to always show:

body {
  overflow-y: scroll;
}

This keeps the scrollbar visible even when content doesn't overflow, preventing the shift. The downside is you'll always see a scrollbar (though it'll be grayed out when not needed).

Better fix - Compensate with padding:

Calculate the scrollbar width and add padding when the modal opens:

// When modal opens
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.paddingRight = `${scrollbarWidth}px`;
document.body.style.overflow = 'hidden';

// When modal closes
document.body.style.paddingRight = '';
document.body.style.overflow = '';

Many modal libraries handle this automatically, but if you're building custom modals or if Sanity Studio's dialogs are causing this, you might need to implement it yourself.

If this is happening with Studio's built-in dialogs and you have custom global CSS, check if you're overriding any of Studio's default modal/body styles - that could interfere with how it manages scroll locking.