Latest version of Sanity causing issue with missing wrapper/padding element

2 replies
Last updated: May 19, 2020
I've experienced this just now with the latest versions of sanity. I've got a list array that can contain various building blocks that represent a page layout and one of them seemingly misses a wrapper or a padding element around its contents. All other building blocks work fine and there's no overflow issues. If I remember right, the formatting toolbar was collapsing itself at some point in the past, maybe it's simply that? BTW - screenshot is Firefox@latest, sanity@latest
AI Update

I understand you're seeing a layout issue with one of your building blocks in an array field where it appears to be missing proper wrapper padding, causing overflow - and this is specifically happening in Firefox with the latest Sanity version.

Without being able to see your specific schema or component configuration, it's difficult to pinpoint the exact cause, but here are the most likely culprits and how to investigate:

Compare Your Block Schemas

Since you mentioned other building blocks work fine, the first step is to compare the schema definition of the problematic block with a working one. According to the array fields documentation, arrays can contain multiple member types, and each type can have its own configuration.

Look for differences in:

  • Whether the field uses Portable Text (type: 'block') vs other field types
  • If there are any custom components defined in the schema (particularly custom input components)
  • How preview configurations are set up between blocks

Custom Components and Layout

If you've added custom input components to your block type via the components property in your schema, there might be a styling conflict. Custom input components need to properly implement the FormField wrapper and other structural elements to work correctly with Studio's layout system.

The documentation notes that custom components should include proper wrapper elements and respect the form structure that Studio expects. If your problematic block has a custom component while others don't, that's a likely culprit.

Browser-Specific Rendering

Firefox can handle flexbox and overflow properties differently than Chromium browsers, particularly with nested flex containers. To verify this is Firefox-specific:

  • Test in Chrome/Edge to see if the issue persists
  • This will help determine if it's a browser compatibility issue or a schema configuration problem

Next Steps

Since you're on the latest versions of both Firefox and Sanity, I'd recommend:

  1. Check the Sanity GitHub issues for similar reports about array field layout or Firefox-specific rendering problems

  2. Open a new issue if nothing exists, including:

    • Your screenshot
    • Exact Firefox version and Sanity version (sanity --version)
    • The schema definition of the affected block compared to a working one
    • Whether it reproduces in other browsers

The Sanity team is responsive to browser compatibility issues, especially with major browsers like Firefox.

If you can share your schema definition for the problematic block (even a sanitized version), the community could provide more specific guidance on whether there's a configuration issue causing the layout problem!

Hi
user B
There is a fix for this on the way!
cool, thanks

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?