Bug/fix operation content responsiveness #9963
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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](https://private-user-images.githubusercontent.com/167549638/333682720-a1f12c10-cb2b-40ac-a804-cd7f0939f369.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjcxNDIsIm5iZiI6MTcyNjE2Njg0MiwicGF0aCI6Ii8xNjc1NDk2MzgvMzMzNjgyNzIwLWExZjEyYzEwLWNiMmItNDBhYy1hODA0LWNkN2YwOTM5ZjM2OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQxODQ3MjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02Nzg5NGY1ZjU4MDA1Y2JkNDQxMDJhNGI5YzY5YjZjZmJmYzZjZDJmODk3ZWMzYmEwMjUzZDIyODZmNzgyYzg5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.OoOZ3ZB6XcxKEvZzAQqVoJpqNgDgyWMaA4BnZjkCMVM)
scheme-container after changes
Elements no longer overlap and respect the given padding and spacing
![new_scheme_auth](https://private-user-images.githubusercontent.com/167549638/333683823-3cc8dca7-c282-4ffa-a4e9-ebc54d4f386a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjcxNDIsIm5iZiI6MTcyNjE2Njg0MiwicGF0aCI6Ii8xNjc1NDk2MzgvMzMzNjgzODIzLTNjYzhkY2E3LWMyODItNGZmYS1hNGU5LWViYzU0ZDRmMzg2YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQxODQ3MjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wOTkwYTQ3OTVmMWVjODJmYjA5MjQ3OGQ0OTU3ODNjZjY0NGUxOGIyOTg4M2E5Njc0NWVjZWZjZTg1NGVlZTg2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.cu4_NiqZwztxXguQ12z8Ve_9YPRj74tKXHg7dMckI5k)
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...
src/
is unmodified: changes to documentation, CI, metadata, etc.)package.json
)My changes...
Documentation
Automated tests