Array field display broken until browser resize in Sanity 3.16

13 replies
Last updated: Oct 3, 2023
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
user J
what are the type options?
type
can be
dialog
or
popover
,
width
can be
'auto'
or a number.
says it right in the property description
got it
but that's for the modal that opens not the add item selector
true, what you can do though is target that select list in CSS and give it a min width. you can `import “path/to/custom.css” file in your sanity.config.ts file.
I’ve done this with other UI bugs in Sanity to fix it until official patches rollout.
it seems like it's a JS thing unfortunately with the positioning 😕
This looks like a bug. Thanks for reporting, User. We’ll log it with the Studio team.
user A
have a way of doing a hot fix for this? trying to fix for a client
Hi
user N
. The team just released
v3.17.0
, which includes a fix for this bug. When you have a chance, we’d love to confirm that it resolves the issue on your end. Thank you for your patience with this one.
fixed on my end thank yoU!

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?