Skip to content

Compensate Operation content in lower resolution sizes #8940

Open
@char0n

Description

@char0n

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.

image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions