Array field display broken until browser resize in Sanity 3.16

13 replies
Last updated: Nov 30, 2025
having this really aggravating issue on 3.16 where the array field shows up like this unless i resize the browser. happens every time i open, but when i resize it fixes itself. help?
AI Update

This sounds like a CSS rendering or layout initialization bug in Sanity Studio 3.16. The "doesn't render correctly until browser resize" behavior is typically caused by CSS layout calculations not triggering properly on initial load.

Here are some things to try:

Quick fixes to test:

  1. Clear your browser cache and Studio build cache - Sometimes stale CSS or build artifacts cause rendering issues:

    # Clear the Studio build
    rm -rf node_modules/.sanity
    npm run dev
  2. Try upgrading to the latest Studio v3 patch - There may be a fix already released:

    npm install sanity@latest

    Check the Sanity releases on GitHub to see if there are any bug fixes related to array fields in newer patches.

  3. Check for custom CSS conflicts - If you have custom styling in your Studio, it might be interfering with the array field layout. Try temporarily disabling any custom styles to see if that resolves it.

  4. Test in a different browser - This helps identify if it's browser-specific.

If those don't work:

This really should be reported as a bug to the Sanity team if it's consistently reproducible. You can:

  • Open an issue on the Sanity GitHub repo with details about your browser, OS, and ideally a minimal reproduction
  • Share your schema definition for the array field in question - sometimes specific field configurations trigger edge cases
  • Check the Sanity Slack community to see if others are experiencing the same issue

Temporary workaround:

If you need to keep working while this gets resolved, you could add a small script that triggers a resize event on Studio load, though this is definitely a hack:

// In your sanity.config.ts
import {useEffect} from 'react'

export default defineConfig({
  // ... your config
  studio: {
    components: {
      layout: (props) => {
        useEffect(() => {
          // Force a layout recalculation
          window.dispatchEvent(new Event('resize'));
        }, []);
        return props.renderDefault(props);
      }
    }
  }
})

The resize triggering the fix suggests the layout calculation is just not happening on mount, so forcing a recalculation might help until there's a proper fix. But definitely report this - it shouldn't be happening!

Show original thread
13 replies

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.

Was this answer helpful?