Redocly / Redocly/redoc

Long example titles overflow

Open
#2,768 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Bug
Dominant language
TypeScript
Stars
25.9k
Forks
2.4k
Avg merge
13h 10m
Merged PRs (30d)
4

Description

Describe the bug

When an OpenAPI example has a long title, the UI doesn't handle it gracefully. The text simply overflows the container and gets cut off (by screen limits) without any ellipsis, tooltip, or text wrapping.

Expected behavior

The UI should handle long example titles gracefully, for example:

  • Truncate with ellipsis (...) and show full title on hover via tooltip
  • Or allow text wrapping
  • Or make the dropdown width responsive to content

Minimal reproducible OpenAPI snippet(if possible)

openapi: 3.0.3
info:
  title: Sample API
  version: 1.0.0

paths:
  /users:
    get:
      summary: Get all users
      responses:
        '200':
          description: Successful response
          content:
            application/json:
              schema:
                type: array
                items:
                  type: object
                  properties:
                    id:
                      type: integer
                    name:
                      type: string
              examples:
                This Is An Extremely Long Example Title That Goes On And On And On Forever And Ever Without Stopping Because The User Specifically Requested A Super Long Title For This Particular Example In The OpenAPI Specification File:
                  value:
                    - id: 1
                      name: John Doe
                    - id: 2
                      name: Jane Smith
                Another Ridiculously Long Example Title That Just Keeps Going And Going Like The Energizer Bunny Because Why Not Have Two Super Long Titles When One Would Clearly Not Be Enough For This API Documentation:
                  value:
                    - id: 42
                      name: Alice Wonder
                    - id: 99
                      name: Bob Builder

Screenshots

Image

Additional context

The dropdown container has a fixed width and no overflow handling, causing the title to be abruptly cut off.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the overflow using the provided OpenAPI 3.0.3 snippet, then inspect the UI that renders example titles in the dropdown. Verify the chosen handling prevents titles from being abruptly cut off and preserves access to the full title, such as through wrapping, responsive width, or a tooltip.

Written by the indexing model from the issue text.

Assessment

Tech stack
openapi, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.