Swagger UI renders larger as needed for desktop usage -- Compact mode possible?

[jimjaeger]

The swagger UI version 3 is rendered larger than swagger UI 2. Means there are lot of spaces and the boxes are larger as needed for desktop usage.
It is may optimized for large fingers or touch pad usage. But as result a user in PC - mouse scenarios has to scroll a lot to get an overview of the APIs.

Is it possible to provide a compact mode or layout per browser type or a out of the box compacted layout & css or to document instructions how to get a more compacted version (may in a style of version 2)?

Q	A
Bug or feature request?	feature
Which Swagger/OpenAPI version?	2.0
Which Swagger-UI version?	3.13.4
How did you install Swagger-UI?	swagger-ui dist
Which browser & version?	chrome
Which operating system?	Windows

[heldersepu]

The only question I see here is:

Is it possible to provide a compact mode or layout per browser?

The answer is a solid YES

Do you need to know how?

[jimjaeger]

Yes please. I looked for a while but could not find a solution except modifying the source scss and compile it. So may I miss a section in the documentation about.

[heldersepu]

So you do know how...

Are you looking for more? Maybe using the plugins or Custom layout, start reading here:
https://github.com/swagger-api/swagger-ui#customization

I think that the great majority of users are happy with the new look, I personally like it.

But I do see your point there are lot of spaces!
Any action with lots of params will require scrolling, like:
http://swagger-net-test.azurewebsites.net/swagger/ui/index?filter=Company#/Company/Company_Get2

[shockey]

Yeah, there is a lot of whitespace floating around. It certainly looks nice, but we're always up for discussions on where we sit on the form-function spectrum 😄

It's certainly possible to write custom styles for Swagger-UI - @ostranme has written a few, which you can find here: https://github.com/ostranme/swagger-ui-themes.

Our organization of CSS classes is one of the weaker points that we expose to users - see my thoughts in #4460 for more context. Overall, though, I think writing custom CSS to suit your needs would be the best course of action, as opposed to creating a custom layout (thanks for the plug though, @heldersepu 😉 ). If your changes are generally applicable to the project, feel free to open a PR and we'll consider pulling them into Swagger-UI's core styles.

[heldersepu]

@shockey thanks for pointing out the swagger-ui-themes, I just incorporated them into Swagger-Net:

• http://swagger-net-test.azurewebsites.net/swagger/ui/index?cssTheme=theme-feeling-blue-css
• http://swagger-net-test.azurewebsites.net/swagger/ui/index?cssTheme=theme-flattop-css
• http://swagger-net-test.azurewebsites.net/swagger/ui/index?cssTheme=theme-material-css

I do see changes but none looks like a compact mode

[luckyyyyy]

I'm still using 2.x because there's no compact mode.

[LinboLen]

need compact theme.