UI responsiveness with narrow vertical view

[tim-lai]

Q&A (please complete the following information)

• OS: macOS
• Browser: chrome
• Version: 88
• Method of installation: npm
• Swagger-UI version: v.3.49.0 (most likely earlier versions as well)
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:

{
  "openapi": "3.0.0",
  "info": {
    "title": "Book API w/ GitHub Actions and Examples",
    "description": "API for tracking your books, authors and pub-dates.",
    "termsOfService": "https://app.swaggerhub.com/eula",
    "contact": {
      "name": "Micheal Higgins",
      "url": "https://smartbear.com",
      "email": "micheal.higgins@smartbear.com"
    },
    "license": {
      "name": "SmartBear License",
      "url": "http://www.smartbear.com/licenses/2021/LICENSE-2.0.html"
    },
    "version": "2.0.0",
    "x-jira-ticket": "SNOP-2244",
    "x-security-approval": "required",
    "x-filters": {
      "status": "ENV_Development",
      "business-unit": "Retail",
      "business-domain": "Books and Magazines",
      "visability": "Customer_Facing"
    }
  },
  "servers": [
    {
      "url": "https://swaggerhub.mwhiggins.com/virts/SmartBear_Org/Book/2.0.0",
      "description": "SwaggerHub API Auto Mocking"
    }
  ],
  "tags": [
    {
      "name": "Book",
      "description": "Book"
    },
    {
      "name": "SmartBear",
      "description": "SmartBear"
    }
  ],
  "paths": {
    "/book": {
      "get": {
        "tags": [
          "Book"
        ],
        "description": "List all the books.",
        "operationId": "book-get",
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/bookSchema"
                },
                "examples": {
                  "Book1": {
                    "value": {
                      "title": "Time Enough for Love",
                      "author": "Robert A. Heinlein",
                      "pubDate": "12-01-1958"
                    }
                  },
                  "Book2": {
                    "value": {
                      "title": "Childhood's End",
                      "author": "Arthur C. Clarke",
                      "pubDate": "11-11-1953"
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Access token is missing or invalid",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorModel"
                }
              }
            }
          },
          "default": {
            "description": "An un-expected error response occurred.",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorModel"
                }
              }
            }
          }
        },
        "security": [
          {
            "bearerAuth": []
          }
        ]
      },
      "post": {
        "tags": [
          "Book"
        ],
        "description": "Add a new Book",
        "operationId": "book-post",
        "requestBody": {
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/bookSchema"
              },
              "example": {
                "title": "I, Robot",
                "author": "Isaac Asimov",
                "pubDate": "04-09-1961"
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "Book added",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/addBook"
                }
              }
            }
          },
          "401": {
            "description": "Access token is missing or invalid",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorModel"
                }
              }
            }
          },
          "default": {
            "description": "An un-expected error response occurred.",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorModel"
                }
              }
            }
          }
        },
        "security": [
          {
            "bearerAuth": []
          }
        ]
      }
    }
  },
  "components": {
    "schemas": {
      "bookSchema": {
        "required": [
          "author",
          "publishDate",
          "title"
        ],
        "type": "object",
        "properties": {
          "title": {
            "type": "string"
          },
          "author": {
            "type": "string"
          },
          "publishDate": {
            "type": "string"
          }
        }
      },
      "addBook": {
        "type": "object",
        "properties": {
          "message": {
            "type": "string",
            "example": "Book added to database"
          },
          "id": {
            "type": "integer",
            "format": "int64",
            "example": 531
          }
        }
      },
      "ErrorModel": {
        "type": "object",
        "properties": {
          "code": {
            "type": "integer"
          },
          "message": {
            "type": "string"
          }
        },
        "description": "Default error schema."
      }
    },
    "securitySchemes": {
      "bearerAuth": {
        "type": "http",
        "scheme": "bearer",
        "bearerFormat": "JWT"
      }
    }
  }
}

Swagger-UI configuration options:

SwaggerUI({
  // your config options here
})

?yourQueryStringConfig

Describe the bug you're encountering

There’s a case in the definition with multiple examples. it works well, but if you resize the window to a fairly narrow view, the rendering starts to break.

To reproduce...

Steps to reproduce the behavior:

1. Click and expand 'GET /book'
2. Click on 'Try It Out'
3. Scroll down to 'Responses'
4. See responsiveness breaking with examples, servers, and the code snippet

Expected behavior

expect maintain responsiveness during narrow vertical view

Screenshots

Additional context or thoughts

related: #6647