Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug/fix operation content responsiveness #9963

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

klm-turing
Copy link

Make the Swagger UI page responsive without cutting out text that may be important and avoiding overlapping elements.

Description

This PR does the following:

Fix overlapping elements due to wrong styles in the scheme-container.
Make sure that the Authorize Button stay on the right without further check in CSS.
Make sure that all texts are visible and not cutting off whatever the screen size and text length

Motivation and Context

Resolves #8940

How Has This Been Tested?

I tested these style changes with different screen sizes and make sure that all existing tests pass.

Screenshots (if appropriate):

scheme-container before changes

Elements overlap and go beyond the given padding
old_scheme_auth

scheme-container after changes

Elements no longer overlap and respect the given padding and spacing
new_scheme_auth

level 0 elements before changes

Texts shrink and split

level0_before.mp4

level 0 elements after changes

Texts are always visible whatever the screen size

level0_after.mp4

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

- Make sure that the authorization button remains on the right without further checking in the style.
- Make sure elements do not overlap
- Make sure that the text elements of the operation tag are always visible, whatever the screen size and whatever the length of the text.
@klm-turing
Copy link
Author

@char0n Thanks for taking a look.

I'll be submitting other small PR addressing the issue piece by piece as you suggest.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Compensate Operation content in lower resolution sizes
1 participant