Compensate Operation content in lower resolution sizes

[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.

[shoaib-31]

@char0n Hi, please assign this issue to me, I am able to fix this. I am attaching a screenshot of it.

[shoaib-31]

@char0n Please review this PR.

[pedoch]

@char0n I raised a PR that addresses this issue (https://github.com/swagger-api/swagger-ui/pull/9325). Please take a look whenever you can.

[char0n]

I'm keeping this issue open as we've basically addressed Amend CSS of expand level 0 - what I mean by this is that collapsed operation has been addressed. Next task is Amend CSS of expand level 1 - address content of expanded Operation.

[char0n]

@pedoch we have another regressions reported:

I'll try to address this during tomorrow, any help is appreciated.

NOTE: CSS breaks only with combination of latest SwaggEditor: https://github.com/swagger-api/swagger-editor/releases/tag/v5.0.0-alpha.84. Alone it works just fine.

---

Update (14.12.2023): I've issued https://github.com/swagger-api/swagger-ui/pull/9425.

[pedoch]

@char0n I see you've pushed a fix for it. Thank you! I tried recreating the bug but I couldn't.

[cxx5208]

Hey Can you assign this to me? I will try to fix the issue Thank you

[char0n]

Hi @cxx5208,

No need to assign explicitly. If you with to work on this, just create PRs that reference this issue. Ideally very small PRs, where each PR addresses just one small aspect.

[klm-turing]

Hi @char0n I got 3 PR for this issue. Let me know if you need anything else. Thanks