Compensate Operation content in lower resolution sizes #8940

char0n · 2023-06-19T08:53:35Z

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 · 2023-09-30T22:44:15Z

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

shoaib-31 · 2023-10-02T15:00:48Z

@char0n Please review this PR.

pedoch · 2023-10-20T00:25:29Z

@char0n I raised a PR that addresses this issue (#9325). Please take a look whenever you can.

Along with the operations, Topbar and Authorization button has been made more responsive as well. Refs #8940

char0n · 2023-11-10T17:18:50Z

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.

Refs #8940 Refs #9325

char0n · 2023-12-13T18:29:27Z

@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 #9425.

Refs #8940

pedoch · 2023-12-14T10:08:41Z

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

cxx5208 · 2024-02-15T08:04:56Z

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

char0n · 2024-02-15T17:29:55Z

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 · 2024-05-31T18:05:11Z

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

This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [org.webjars:swagger-ui](https://www.webjars.org) ([source](https://github.com/swagger-api/swagger-ui)) | `5.18.3` -> `5.20.0` | [![age](https://developer.mend.io/api/mc/badges/age/maven/org.webjars:swagger-ui/5.20.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/maven/org.webjars:swagger-ui/5.20.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/maven/org.webjars:swagger-ui/5.18.3/5.20.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/maven/org.webjars:swagger-ui/5.18.3/5.20.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- > [!WARNING] > Some dependencies could not be looked up. Check the Dependency Dashboard for more information. --- ### Release Notes <details> <summary>swagger-api/swagger-ui (org.webjars:swagger-ui)</summary> ### [`v5.20.0`](https://github.com/swagger-api/swagger-ui/releases/tag/v5.20.0): Swagger UI v5.20.0 Released! ##### Bug Fixes - **docker:** add OpenContainer labels - **json-schema-5**: fix JumpToPath feature for schemas, closes [swagger-api/swagger-editor#4035](https://github.com/swagger-api/swagger-editor/issues/4035) - fix JumpToPath feature for auth methods - display the correct name of security methods - fix console errors appearing when security scheme is not defined - **components**: render examples only when their shape is correct - **swagger-client**: allow resolving URLs without extensions, closes [swagger-api/apidom#4298](https://github.com/swagger-api/apidom/issues/4298) - **css**: fix css sourcemaps - **security**: update axios to address CVE-2024-39338 - **swagger-client**: do not encode server variables, closes [swagger-api/swagger-js#3656](https://github.com/swagger-api/swagger-js/issues/3656) - **security**: fix unsafe cookie serialization, addresses CVE-2024-47764, GHSA-pxg6-pf52-xh8x - **spec**: compensate if OpenAPI.paths field is defined as unexpected structure - **json-schema-2020-12**: check for schema type before extracting extension keywords, closes [swagger-ui/issues#9376](https://github.com/swagger-api/swagger-ui/issues/9376) - **json-schema-2020-12**: fix rendering of uniqueItems keyword - **json-schema-2020-12**: fix overrides of JSON Schema extension keywords - **spec**: clear JSON state when loading a new definition - **oas31**: fix caching of JSON Schema 2020-12 context - **json-schema-2020-12**: fix default expansion being applied to components after initial render - **json-schema-2020-12**: fix complex schemas expanding beyond the default expansion depth - **json-schema-2020-12**: fix deep expansion not expanding some of the keywords - **oas31**: fix expansion of Schema Object fixed fields ##### Features - **swagger-ui-react**: add support for initialState prop - add horizontal scrollbar for schemas, refs [swagger-api/swagger-ui#8940](https://github.com/swagger-api/swagger-ui/issues/8940) - display schema of complex parameters - display schema of complex request body properties - **json-schema-2020-12**: allow to use fn outside of React context - **oas31**: display schema of complex parameters with union type - **oas31**: display schema of complex request body properties with union type - **oas31**: display textarea for parameters with complex union type - **json-schema-2020-12**: allow to use getTitle outside of JSON Schema 2020-12 context - **json-schema-2020-12**: introduce system bound HOC - **json-schema-2020-12**: add support for rendering extension keywords, closes [swagger-ui/issues#9376](https://github.com/swagger-api/swagger-ui/issues/9376) - **json-schema-2020-12**: add support for rendering examples keyword - **json-schema-2020-12**: use JSON Viewer to display keywords with complex values - **json-schema-2020-12**: handle empty objects and arrays in JSONViewer - **oas3**: more support for OpenAPI 3.0.4 - introduce custom URL sanitization mechanism - apply additional fixes for custom URL sanitization mechanism - **oas31**: add support for OpenAPI extensions - **json-schema-2020-12**: respect showExtensions config option *** #### Attributions (alphabetical order) [@char0n](https://github.com/char0n) [@glowcloud](https://github.com/glowcloud) [@robert-hebel-sb](https://github.com/robert-hebel-sb) ### [`v5.19.0`](https://github.com/swagger-api/swagger-ui/releases/tag/v5.19.0): Swagger UI v5.19.0 Released! ##### Features - add support for OpenAPI 3.0.4 ([#10247](https://github.com/swagger-api/swagger-ui/issues/10247)) ([d437474](https://github.com/swagger-api/swagger-ui/commit/d437474b0c8aef286522d19bc7d02e35230d9a7d)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/infonl/dimpact-zaakafhandelcomponent).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

char0n added type: enhancement cat: style & presentation cat: user experience cat: a11y cat: browser specific Good first issue labels Jun 19, 2023

shoaib-31 mentioned this issue Sep 30, 2023

fix: Operation content is fixed for lower resolution sizes #9271

Closed

17 tasks

pedoch mentioned this issue Oct 20, 2023

Fix(styling): Make the Swagger UI Operation page more responsive on smaller screen #9325

Merged

17 tasks

char0n self-assigned this Nov 10, 2023

char0n closed this as completed in #9325 Nov 10, 2023

char0n pushed a commit that referenced this issue Nov 10, 2023

fix(styling): make Operations more responsive on smaller screens (#9325)

e34d8fb

Along with the operations, Topbar and Authorization button has been made more responsive as well. Refs #8940

char0n reopened this Nov 10, 2023

char0n removed their assignment Nov 13, 2023

char0n mentioned this issue Nov 20, 2023

Fix(styling): Ensure authorize button stays on the right for UX reasons #9387

Merged

17 tasks

char0n pushed a commit that referenced this issue Nov 20, 2023

fix(styling): ensure authorize button stays on the right (#9387)

8f93354

Refs #8940 Refs #9325

char0n mentioned this issue Dec 14, 2023

fix(styles): fix regressions in operations on smaller screens #9425

Merged

char0n added a commit that referenced this issue Dec 14, 2023

fix(styles): fix regressions in operations on smaller screens

599519d

Refs #8940

char0n added a commit that referenced this issue Dec 14, 2023

fix(styles): fix regressions in operations on smaller screens (#9425)

748dec1

Refs #8940

This was referenced May 24, 2024

Bug/fix operation content responsiveness #9963

Open

Bug/fix operation summary responsiveness #9982

Open

fix(style): make operation section and parameters responsive #9992

Open

char0n mentioned this issue Feb 27, 2025

feat: apply cumulative update to address various issues #10324

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compensate Operation content in lower resolution sizes #8940

Compensate Operation content in lower resolution sizes #8940

char0n commented Jun 19, 2023

shoaib-31 commented Sep 30, 2023

shoaib-31 commented Oct 2, 2023

pedoch commented Oct 20, 2023

char0n commented Nov 10, 2023

char0n commented Dec 13, 2023 •

edited

Loading

pedoch commented Dec 14, 2023

cxx5208 commented Feb 15, 2024

char0n commented Feb 15, 2024

klm-turing commented May 31, 2024

Compensate Operation content in lower resolution sizes #8940

Compensate Operation content in lower resolution sizes #8940

Comments

char0n commented Jun 19, 2023

shoaib-31 commented Sep 30, 2023

shoaib-31 commented Oct 2, 2023

pedoch commented Oct 20, 2023

char0n commented Nov 10, 2023

char0n commented Dec 13, 2023 • edited Loading

pedoch commented Dec 14, 2023

cxx5208 commented Feb 15, 2024

char0n commented Feb 15, 2024

klm-turing commented May 31, 2024

char0n commented Dec 13, 2023 •

edited

Loading