Sanity v3 tool document rendering limited to 100vh height issue

I found the exact issue you're experiencing! This is a known problem with custom tools in Sanity Studio v3 where the default styling limits the container to 100vh, causing that visual cutoff where the background changes from white to gray.

The solution is to add style={{height:'100%', overflow:'auto'}} to your outermost parent Container component. This will allow your content to expand beyond the 100vh limit and become scrollable.

Here's how to modify your code:

export const usageGuide = () => {
  return {
    title: 'Sanity CMS Usage Guide',
    name: 'sanity-usage-guide',
    icon: MdDashboard,
    component: (props) => {
      return (
        <>
          <Container style={{height:'100%', overflow:'auto'}}>
            <Container paddingY={4}>
              <Stack space={4} padding={4}>
                <Heading>Quick Start Guide</Heading>
                <video controls width="100%" style={{maxWidth: '800px'}}>
                  <source src={videoUrl} type="video/mp4" />
                </video>
              </Stack>
            </Container>
            <Stack space={4} padding={4}>
              {/* rest of your content */}
            </Stack>
          </Container>
        </>
      )
    },
  }
}

Why this happens: The issue occurs because the Stack component's space prop (which is essentially a grid-gap property) causes the content padding to extend outside the parent Container's boundaries. The default 100vh height constraint from Studio's styling combined with the lack of overflow handling creates that visual cutoff you're seeing.

By setting both height: '100%' and overflow: 'auto', the container will:

1. Expand to fill the available space properly
2. Add a scrollbar when content exceeds the viewport height

This is one of those CSS quirks where both properties need to work together - the height alone won't fix it, but adding the overflow property makes everything flow correctly. As one community member put it: "it's 2023 and you still have to use six lines of CSS to center things sometimes" - some things just work from experience rather than logical explanation!

This solution was confirmed by others in the community who had the exact same issue with custom tools in Studio v3.