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

[pedoch]

Make the Swagger UI page more responsive on smaller screens.

Description

This PR does the following:

• Allows the Search input in the TopBar wrap under the logo at a breakpoint of 550px, when the screen is too small to contain both on the same line. [Screenshot section 1]
• Stops the icon in the Authorize Button from moving under the text when space becomes too tight. [Screenshot section 2]
  • Instead, the Authorize Button itself moves to the next line to create more space for the icon to stay in place.
• Lastly, it allows the operation path to be viewed more easily on smaller screens by moving the operation description below the path and reducing the font-size of the operation method. [Screenshot section 3]

Motivation and Context

These changes will improve the responsiveness of Swagger UI on smaller screens. It started off as a fix for this issue - #8940 but grew to a general responsiveness improvement.

Resolves #8940

How Has This Been Tested?

I tested these style changes using multiple devices on multiple platforms with different screen sizes.
Also, because these are just styling changes no new tests are needed and all existing tests pass.

Screenshots (if appropriate):

[1] TopBar Screenshot

Before:

After:

[2] Authorize Button Screenshot

Before:

After:

[3] Operation Summary Screenshots

Before:

After:

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.

[char0n]

Hi @pedoch, thank you for the PR. I've tested locally and it works well. The only noticeable negative effect is that the Copy button that appears onhover shifts the size of the texts, but that not something that your canges have caused.

[char0n]

LGTM

[AlexanderKhudoev]

Now the Authorize button moved to the Left side..
You need remove display: flex from .schemes style to make align Authorize button to the Right side..

[char0n]

@AlexanderKhudoev would you mind issuing a PR?

[AlexanderKhudoev]

@AlexanderKhudoev would you mind issuing a PR?

I unfortunately don't have time to do that yet.
Even if I release the fixes, the very "idea" of optimizing the UI on "mobile devices" after the fix will go back to the state it was 5 days ago, before @pedoch commit

I don't know anyone who uses Swagger on mobile devices. In my practice for 10 years, everyone has only used Swagger through the Desktop browser.

And now, having moved the Authorize button to the left, it's become awkward to use Swagger on Desktops.

[pedoch]

Apologies, I didn't notice this when testing. @char0n I can push a fix for it if given a couple of hours.

cc: @AlexanderKhudoev

[pedoch]

@AlexanderKhudoev it turns out the reason the button was on the left in your screenshot was because the Schemes selector was not present. I failed to take that into account as it was always present while I was working on the issue.

@char0n I have now raised this PR: #9387 which takes this into account and ensures the Authorize button is always on the right on larger screens. Please feel free to take a look at it and approve/merge if you think the proposed solution makes sense.

[char0n]

Thank you both @AlexanderKhudoev and @pedoch for early regression report and fix.

[bshain-vtinfo]

Hey there @pedoch , while this is a few months after this has gone in, I believe the changes in this PR introduced a regression around setting displayOperationId: true. It pushes the last few characters of the operation id onto a second line & makes the text much harder to read.

E.x. on version 5.9.4 (after this change went in):

And on version 5.9.3 (before this change went in):

I haven't seen a fix go up yet for this anywhere, so just wanted to call it out at least.

[char0n]

Hi @bshain-vtinfo,

Thanks a lot for the report. Would you try to investigate and issue a fixing PR? We would really appreciate it.