Compensate Operation content in lower resolution sizes

This can be reproduced both in SwaggerEditor (v4) and Swagger Editor (v5). The preview that is located in the right-hand side (where SwaggerUI displays) is fully collapsible without any limits. The components tries to compensate, but after some threshold they will stop making visual sense.

This is not really specific to SwaggerUI. If we take for example React Material Design components, these reference components will too collapse until they stop making sense.

What we can do is to use Material Design Specification and say that our minimal supported break-point is 360dp/px. We will make CSS changes and make sure that Operations and other visual components renders properly on that break-point. Second remediation can be setting the minimum width of the preview pane in the editors (but not sure this is warranted).

Under threshold of 360dp/px what is displayed is no longer guaranteed.

Work on this can be done progressively, layering changes on top of previous changes:

• Amend CSS of expand level 0
• Amend CSS of expand level 1
  ….. repeat to level n ….

Currently SwaggerUI has some notion of minimal supported break-point and some components tries to compensate.

Reproduce the collapse behavior in the Swagger Editor preview using the linked SwaggerEditor v4 and Swagger Editor v5 examples, then inspect the SwaggerUI preview components and their existing responsive CSS. Apply the responsive changes progressively from expand level 0 through deeper levels, and consider the 360dp/px breakpoint the issue proposes as the point where Operations and related components should remain visually usable.