fix(try-it-out): Fix the width of image responses

[hkosova]

This PR fixes an issue where images responses were stretched to the parent container's width. The issue was originally reported on Stack Overflow: https://stackoverflow.com/questions/68512725/swagger-ui-openapi-rendering-image-with-full-width

To reproduce the issue, open
https://petstore.swagger.io/?url=https://httpbin.org/spec.json#/Images/get_image
and test GET /image.

Context

The issue appears to be a small regression introduced in PR #5578. That change replaced inline style <img style={{ maxWidth: "100%" }} with the CSS class img.full-width { width: 100%; }. That is, the new code applied width instead of max-width, most likely an oversight. The current PR changes width back to max-width.

Note: An alternative fix would be to remove the img.full-width class entirely because img elements get max-width: 100% from tachyons-sass image styles used by Swagger UI - as shown on the image below. Let me know if you prefer to have img.full-width style removed rather than updated.

How Has This Been Tested?

Manually.

Screenshots (if appropriate):

Before the fix:

After the fix:

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 @hkosova,

An alternative fix would be to remove the img.full-width class entirely because img elements get max-width: 100% from tachyons-sass image styles used by Swagger UI - as shown on the image below. Let me know if you prefer to have img.full-width style removed rather than updated.

Thanks for providing different alternative. IMHO removing the class makes more sense as the max-width is already applied by the tachions-sass and we don't need width rule applied.

[char0n]

Nice job!

[char0n]

@hkosova is there a tracking issue for this PR?

[hkosova]

@char0n no - the info is in this PR's description only.