Operations with long paths render strangely

[linelson]

Q&A (please complete the following information)

• OS: Windows 10
• Browser: Chrome 71.0.3578.98
• Method of installation: npm
• Swagger-UI version: 3.20.7
• Swagger/OpenAPI version: Either

Content & configuration

Example Swagger/OpenAPI definition:
Excerpt from edited petstore json found here: http://petstore.swagger.io/v2/swagger.json

paths:
 /pet/with/a/really/long/made/up/path/that/keeps/going/and/going/and/when/will/it/ever/stop/nobody/knows/:
    post:
      tags:
        - pet
      summary: M:Microsoft.SomeNamespace.Some.Really.Long.Namespace.SomeController.MethodName(System.String,System.String,System.String,System.String,Newtonsoft.Json.Linq.JToken) 
      description: ''

Swagger-UI configuration options:

Easily reproducible in the swagger ui rendered by the editor at editor.swagger.io

Describe the bug you're encountering

Operations with very long paths and summaries render strangely. The long path takes maybe 90% of the space, resulting
in the operation summary rendering very strangely.

To reproduce...

Steps to reproduce the behavior:

1. View a document with an operation that (a) has a very long path and (b) has a non-empty summary or a summary with a single very long word (like a namespace)
2. Note the 'squished' appearance of the operation summary or the path. See screenshot. It looks worse the longer the operation summary is.

Expected behavior

Better wrapping and space distribution. Wrapping would ideally occur at a '/' in the path and more horizontal space should be given to the summary.

Screenshots

More dramatic example:

Bad wrapping with the summary:

[shockey]

Oof!

[shockey]

#5184 vastly improves the situation here:

thanks for reporting, @linelson!

[tnpradeep]

Hello,

Can we have summary in next line when the path name is too long ?

[shockey]

@tnpradeep thanks for the suggestion! it's not possible at the moment, but we may add it in the future.