Get help on Discord

How to increase dialog size in Portable Text editor for internal links?

4 replies
Last updated: Mar 11, 2024
Is there any way to increase the size of dialogs within the Portable Text editor?Our client is unable to create internal links in their portable text because the dialog is only 300px width and therefore the document titles are invisible.
I could not find any way of modifying this.
AI Update

Based on the search results, I found the solution! You can control the dialog width for annotations in Portable Text by using the options.modal configuration.

Here's how to increase the dialog size for your internal link annotation:

annotations: [
  {
    name: "internalLink",
    type: "object",
    icon: FiLink,
    options: {
      modal: { 
        type: "dialog", 
        width: 'auto' // or specify a value like 'large', 1, 2, etc.
      },
    },
    title: "Internal Link",
    fields: [
      // your fields here
    ]
  }
]

The options.modal object accepts two properties:

  • type: Set to "dialog" for a modal dialog
  • width: Can be set to:
    • 'auto' - automatically sizes based on content
    • Numeric values like 1, 2, 3 for different preset widths (where higher numbers = wider dialogs)

This configuration is documented in the Array type documentation and also applies to object types within Portable Text annotations. The same modal option is available for Object types as well.

Setting width: 'auto' should resolve your issue with document titles being cut off at 300px, as it will allow the dialog to expand to fit the content. If you need even more control, you can experiment with the numeric width values (try width: 2 or width: 3) to find what works best for your use case.

This is a common issue that others have encountered - there's even a community discussion specifically about this problem with the same solution.

Show original thread
4 replies
Bringing this to anyones attention again.As you can see in the screenshot, inserting internal links (references) in our Portable Text editor is unusable because of the size of the popover dialog.
Is there any way to improve this experience? Preferable by increasing the width of the dialog.
I suspect you used 
annotations
to offer that internal link reference, which would allow you to set the modal like so:
annotations: [
          {
            name: "internalLink",
            type: "object",
            icon: FiLink,
            options: {
              modal: {
                type: "dialog",
                width: 'auto'
              },
            },
            title: "Internal link",
            fields: [
              {
                name: "reference",
                type: "reference",
      ...
I missed that 
options
property in the docs!Set the modal type to 
dialog
and that fixed it.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.

Get started for freeExplore the demo

Was this answer helpful?