Response Section misaligned when the example name is very long.

[suhasbhatta]

Q&A (please complete the following information)

• OS: macOS
• Browser: chrome
• Version: Done in Swagger Editor https://editor.swagger.io/
• Method of installation: NA
• Swagger-UI version: https://editor.swagger.io/
• Swagger/OpenAPI version: OpenAPI 3.0.0

Content & configuration

Following OpenAPI 3.0.0 spec is used in the swagger editor.
Example Swagger/OpenAPI definition:

{
  "openapi": "3.0.0",
  "info": {
    "title": "Simple API overview",
    "version": "2.0.0"
  },
  "paths": {
    "/": {
      "get": {
        "operationId": "listVersionsv2",
        "summary": "List API versions",
        "responses": {
          "200": {
            "description": "200 response",
            "content": {
              "application/json": {
                "examples": {
                  "Response Example 1: List API Version in details including last updated and current status": {
                    "value": {
                      "versions": [
                        {
                          "status": "CURRENT",
                          "updated": "2011-01-21T11:33:21Z",
                          "id": "v2.0",
                          "links": [
                            {
                              "href": "http://127.0.0.1:8774/v2/",
                              "rel": "self"
                            }
                          ]
                        },
                        {
                          "status": "EXPERIMENTAL",
                          "updated": "2013-07-23T11:33:21Z",
                          "id": "v3.0",
                          "links": [
                            {
                              "href": "http://127.0.0.1:8774/v3/",
                              "rel": "self"
                            }
                          ]
                        }
                      ]
                    }
                  }
                }
              }
            }
          },
          "300": {
            "description": "300 response",
            "content": {
              "application/json": {
                "examples": {
                  "foo": {
                    "value": "{\n \"versions\": [\n       {\n         \"status\": \"CURRENT\",\n         \"updated\": \"2011-01-21T11:33:21Z\",\n         \"id\": \"v2.0\",\n         \"links\": [\n             {\n                 \"href\": \"http://127.0.0.1:8774/v2/\",\n                 \"rel\": \"self\"\n             }\n         ]\n     },\n     {\n         \"status\": \"EXPERIMENTAL\",\n         \"updated\": \"2013-07-23T11:33:21Z\",\n         \"id\": \"v3.0\",\n         \"links\": [\n             {\n                 \"href\": \"http://127.0.0.1:8774/v3/\",\n                 \"rel\": \"self\"\n             }\n         ]\n     }\n ]\n}\n"
                  }
                }
              }
            }
          }
        }
      }
    },
    "/v2": {
      "get": {
        "operationId": "getVersionDetailsv2",
        "summary": "Show API version details",
        "responses": {
          "200": {
            "description": "200 response",
            "content": {
              "application/json": {
                "examples": {
                  "foo": {
                    "value": {
                      "version": {
                        "status": "CURRENT",
                        "updated": "2011-01-21T11:33:21Z",
                        "media-types": [
                          {
                            "base": "application/xml",
                            "type": "application/vnd.openstack.compute+xml;version=2"
                          },
                          {
                            "base": "application/json",
                            "type": "application/vnd.openstack.compute+json;version=2"
                          }
                        ],
                        "id": "v2.0",
                        "links": [
                          {
                            "href": "http://127.0.0.1:8774/v2/",
                            "rel": "self"
                          },
                          {
                            "href": "http://docs.openstack.org/api/openstack-compute/2/os-compute-devguide-2.pdf",
                            "type": "application/pdf",
                            "rel": "describedby"
                          },
                          {
                            "href": "http://docs.openstack.org/api/openstack-compute/2/wadl/os-compute-2.wadl",
                            "type": "application/vnd.sun.wadl+xml",
                            "rel": "describedby"
                          },
                          {
                            "href": "http://docs.openstack.org/api/openstack-compute/2/wadl/os-compute-2.wadl",
                            "type": "application/vnd.sun.wadl+xml",
                            "rel": "describedby"
                          }
                        ]
                      }
                    }
                  }
                }
              }
            }
          },
          "203": {
            "description": "203 response",
            "content": {
              "application/json": {
                "examples": {
                  "foo": {
                    "value": {
                      "version": {
                        "status": "CURRENT",
                        "updated": "2011-01-21T11:33:21Z",
                        "media-types": [
                          {
                            "base": "application/xml",
                            "type": "application/vnd.openstack.compute+xml;version=2"
                          },
                          {
                            "base": "application/json",
                            "type": "application/vnd.openstack.compute+json;version=2"
                          }
                        ],
                        "id": "v2.0",
                        "links": [
                          {
                            "href": "http://23.253.228.211:8774/v2/",
                            "rel": "self"
                          },
                          {
                            "href": "http://docs.openstack.org/api/openstack-compute/2/os-compute-devguide-2.pdf",
                            "type": "application/pdf",
                            "rel": "describedby"
                          },
                          {
                            "href": "http://docs.openstack.org/api/openstack-compute/2/wadl/os-compute-2.wadl",
                            "type": "application/vnd.sun.wadl+xml",
                            "rel": "describedby"
                          }
                        ]
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Describe the bug you're encountering

The Table (Response Code, Example, Links) were misaligned when the example string is long.

To reproduce...

Steps to reproduce the behavior:

1. Modify the OpenAPI Spec.json
2. Make the example string bit longer (Say about 100 characters)
3. The tabular structure overflows from the parent border and will go beyond the border.

Expected behavior

The entire section should fit inside the parent border.

Screenshots

[suhasbhatta]

Thanks @mathis-m @tim-lai for following up and fixing the bug :)

[suhasbhatta]

Can we add a tooltip on-hover to show the entire content of the option values. It got truncated with the fix #7060 @tim-lai

[mathis-m]

I can add a follow up PR to this later.