Get help on Discord

Modifying previews in lists and finding a solution for limited space issue.

6 replies
Last updated: Apr 13, 2022
Sanity team, is there a way to modify how previews are displayed in lists? A recent update inserts the document type name, but it makes the more compressed lists illegible:
AI Update

I appreciate you reaching out about this list view display issue. However, I need to be upfront: I cannot find any official documentation or verified information about a recent Sanity Studio update that automatically inserts document type names into list previews in a way that would make them illegible.

What I can verify:

The preview configuration system in Sanity controls how documents appear in lists through the select and prepare functions in your schema. This configuration handles the title, subtitle, and media display for list items, but there's no documented change about automatic type name insertion.

If you're experiencing unexpected display changes:

  1. Check your schema's preview configuration - The preview settings in your document schemas are what control list display. Review your preview.prepare() functions to see if anything is concatenating type information into titles or subtitles.

  2. Review custom components - If you're using custom Component Views or Structure Builder customizations, these could affect how lists render. Note that custom components have limitations and only work in certain list contexts.

  3. Check for plugin updates - If you're using third-party Studio plugins, one of them may have changed its list rendering behavior.

  4. Studio version - Verify which Studio version you're running (sanity versions in your project). This can help identify if a specific update introduced the change you're seeing.

What I cannot recommend:

Without being able to verify the specific issue you're encountering in the official documentation, I can't provide CSS workarounds or other modifications that might break with future updates or have unintended side effects.

Best next steps:

  • Share a screenshot or more specific details about where you're seeing this in the Sanity Slack community or GitHub issues
  • Check if others are experiencing the same issue
  • The Sanity team can then confirm whether this is intentional behavior and provide official guidance on customization options

If this is indeed a new Studio behavior affecting readability, that's valuable UX feedback the team would want to hear about directly.

if a preview works here, I’m not sure if it should be at the reference object root or associated with each type. Where yours says “HELP CENTER ARTICLE” is that the document type title or a subtitle? Alternatively, maybe add an annotation for each type:
 annotations: [
          {name: 'help', title: 'Help Docs', type: 'reference', to: {type: 'help'}},
          {name: 'article', title: 'Articles', type: 'reference', to: {type: 'article'}},
        ]
ah I see, looks to be the same for block and regular schema reference types whenever you add multiple type references they’re noted to the right of the list and can overlap pretty severely. I’m not sure if there’s a way around this with the typical type api. You may want to add multiple fields in your document with a single type or a query per reference field - otherwise you might need to shorten the titles in those articles - or move that longer title into the subtitle field.
You can do quite a bit with the preview setting. Maybe getting creative with fewer characters in the long document titles and then tweaking previews could improve readability. Here’s an example where didn’t want a document to have a title and instead replaced the preview title value with a reference in the document:

preview: {
    select: {
      title: 'title',
      showtitle: 'show.title',
      date: 'date',
      media: 'show.image',
      venue: 'venue.title'
    },
    prepare({venue, showtitle, date, media}) {
      return {
        title: `${showtitle ? showtitle : 'Add a show'}`,
        subtitle: `${date ? date.slice(0,10) + '@' + venue : 'Add a date + venue'}`,
        // subtitle: `${showtitle ? title + showtitle : title}`,
        // subtitle: date.toISOString().slice(0,10), //  ${date.toLocaleTimeString("en-US")}
        media: media || <Icon emoji="🎩" />
      }
    }
  },

I just tested multiple reference types in block content in my own studio and I think I see where this limited space issue is happening. I don’t see any way around this in the API documentation I linked, but it may be worth a shot to add preview/subtitle options into the reference object.

{
            title: 'Reference',
            name: 'reference',
            type: 'reference',
            to: [{ type: 'category' }, { type: 'tag' }],
          },
You may want to run this past content-modeling and content-strategy to for a bit of schema design input.
oh wow, I was just informed that you can define width in annotation modals - this may help you: https://github.com/sanity-io/sanity/releases/tag/v2.23.0
Wow, thank you for the very thorough response!!! I should have added context - this is an 
internalLink
annotation used in rich text. The info in the changelog is exactly what I needed. 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.

Get started for freeExplore the demo

Was this answer helpful?