Primary and horizontal scrolbars floating in demo app

stoplightio / elements

Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown.

https://stoplight.io/open-source/elements/

Apache License 2.0

1.71k stars 197 forks source link

Primary and horizontal scrolbars floating in demo app #1086

Closed mallachari closed 3 years ago

mallachari commented 3 years ago

Describe the bug

There's a primary vertical scrollbar floating on the screen. Horizontal scrollbar appears within primary column.

To Reproduce

Open demo app with this url: https://elements-demo.stoplight.io/?spec=https://stoplight.io/api/v1/projects/calendly/api-docs/nodes/reference/calendly-api/oauth.yaml?branch=production#/operations/get-oauth-authorize

Expected behavior

Vertical scrollbar appears on right side of viewport. No horizontal scrollbar - content shrinks to match document width.

Screenshots

Environment (remove any that are not applicable):

Library version: 7.0.0-alpha.7
OS: Linux
Browser: Chrome 87

marcelltoth commented 3 years ago

Vertical scrollbar appears on right side of viewport.

I'm not sure agree. We had the requirement to have two separate scrolling areas, and this is one of them. @marbemac ?

The other one is fine.

marbemac commented 3 years ago

Sorry what's the question, if we should or shouldn't have a vertical scrollbar when needed (that appears on right side of screen versus floating off of the right side)? Or is it a question about something else

mallachari commented 3 years ago

The question is about position of that vertical scrollbar. Whether it should be within the main column or stick to the right side of the viewport.

marbemac commented 3 years ago

Ah ok. Well then, re:

I'm not sure agree. We had the requirement to have two separate scrolling areas, and this is one of them. @marbemac ?

Yes, technically the requirement as described was to scroll the sidebar and main content separately. However, it was assumed that the primary page scroller would be along the right side of the screen - which is how most websites work - rather than floating towards the middle of the screen.