Sidebar broken in playground when preview switches to compact layout

[rijenkii]

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

{
  "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

{
  "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

Actual result

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]

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

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 ❤️

[rijenkii]

Still an issue.

[kash2104]

@rijenkii is the issue still open?

[rijenkii]

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

[asyncapi-bot]

🎉 This issue has been resolved in version 2.4.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀