Array field display broken until browser resize in Sanity 3.16
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:
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 devTry upgrading to the latest Studio v3 patch - There may be a fix already released:
npm install sanity@latestCheck the Sanity releases on GitHub to see if there are any bug fixes related to array fields in newer patches.
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.
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 thread13 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.