Get help on Discord

Troubleshooting rendering issues with a static document in Sanity v3

6 replies
Last updated: Jan 18, 2023
hi guys,
i'm building my first tool in v3 which is a simple static how-to document, but i'm struggling with something very trivial. For some reason the document is rendered only for 100vh. This is apparently coming from the default styling. See the change from white to gray and the section highlighted in the styling.

Is there anything i can do here?
AI Update

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.

Hey
user R
! Can you share your code?
In the meantime, I would try• making sure there are explicitly stated widths even if they're just 100%
• maybe add an overflow : auto to pair with the height on #sanity
• add explicit display properties to #sanity
It's funny that there are things called "standards" for HTML and CSS when every single browser handles them differently but that can account for
some of the basics being handled by most browsers
It's also possible that something inside the resulting code in #sanity is throwing it off. I've seen Chrome forgive open/close brackets that Firefox won't, for example.
hey guys, sorry it's been a bit long. Here's a snapshot of the code.
I don't think i'm doing anything fancy just yet and i'm definitely not defining any styles. I think this behaviour comes from the defaults for the tools api

import {MdDashboard} from 'react-icons/md'
import {Card, Text, Stack, Heading, Container} from '@sanity/ui'

// import tutorialVideo from '../../../static/tutorial.MP4'
const videoUrl =
  '<https://cdn.sanity.io/files/q42ljy6v/production/304acb309bba8933769e16fee74cc52c1042e714.mov>'

export const usageGuide = () => {
  return {
    title: 'Sanity CMS Usage Guide',
    name: 'sanity-usage-guide', // localhost:3333/my-custom-tool
    icon: MdDashboard,
    component: (props) => {
      return (
        <>
          <Container>
            <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}>
              <Heading>Definitions:</Heading>
              <Heading>Sanity Concepts</Heading>
              <Text>Documents</Text>
              <Text>Object</Text>
              <Text>Reference</Text>
              <Text>Users & Roles</Text>
              <Heading>Properties</Heading>
              <Text>Villa Document</Text>
              <Text>Listings</Text>
              <Heading>Categories</Heading>
              <Text>Categories group villas into specific segments.</Text>
              <Heading>Collections</Heading>
              <Text>
                Collections are similar to categories, since they also help to segment villas into
                groups. The difference is that collections where conceive as 'landing page' approach
                that allows to quickly assign properties to each group to publish them.
              </Text>
            </Stack>
          </Container>
        </>
      )
    },
  }
}
I was actually able to reproduce this using the Sanity UI arcade. It seems to come down to the "space" prop on the highest-level Stack.
Not that it's an inherent issue, but tweaking that was the biggest way to throw things off. The actual "problem" is the flow of the parent containers. Somehow the Stack's padding ( which apparently is just a renamed grid-gap property) bust outside of the parent Container.

When I add
style={{height:'100%',overflow:'auto'}} to that overall parent container, it expands to meet the boundaries of everything contained inside of it.
I am unsure of the prop-based way to make that happen but for the time being it's a simple fix.
thanks
user S
, it did the job. I'm 99% sure i tried setting the height but apparently the overflow does the trick then.
No problem. Honestly it's one of those things I've learned to accept without explanation that I know works from experience. Just like it's 2023 and you still have to use six lines of CSS to center things sometimes instead of being able to write "center things" lol

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?