search

asyncapi / asyncapi-react

React component for rendering documentation from your specification in real-time in the browser. It also provides a WebComponent and bundle for Angular and Vue
https://asyncapi.github.io/asyncapi-react/
Apache License 2.0
183 stars 124 forks source link

Sidebar broken in playground when preview switches to compact layout #907

Open rijenkii opened 8 months ago

rijenkii commented 8 months ago

Description

When opening the sidebar through the hamburger button on bottom right of the screen, it is drawn on the right border of the screen, or not drawn at all if you decrease the space dedicated to the preview.

Reproduced on Firefox 121 and Chromium 120.0.6099.216, Fedora 39.

Steps to reproduce

Paste the following into the playground:

Schema ```json { "asyncapi": "3.0.0", "info": { "title": "Reproduction", "version": "1.0.0" }, "operations": { "test": { "action": "receive", "channel": { "$ref": "#/channels/test" } } }, "channels": { "test": { "address": "/test", "messages": { "test": { "$ref": "#/components/messages/test" } } } }, "components": { "messages": { "test": { "payload": { "type": "object", "properties": { "test": { "description": "test", "type": "string", "pattern": "^(?:helloworld)+$" } }, "required": ["test"] } } } } } ```
Configuration ```json { "show": { "sidebar": true, "info": true, "operations": true, "servers": true, "messages": true, "schemas": true, "errors": true }, "expand":{ "messageExamples": false }, "sidebar": { "showServers": "byDefault", "showOperations": "byDefault" } } ```

Then click on the hamburger button.

Expected result

image

Actual result

image

Troubleshooting

I have achieved the result in the "expected result" by removing .w-full from the parent of .sidebar--content and hardcoding correct width on that element.

github-actions[bot] commented 4 months ago

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

rijenkii commented 4 months ago

Still an issue.

kash2104 commented 1 week ago

@rijenkii is the issue still open?

rijenkii commented 1 week ago

The issue is still reproducible on https://asyncapi.github.io/asyncapi-react/: image