Sidebar stuck in overlay mode when page width is increased

[rijenkii]

Description

When opening the sidebar through the hamburger button on bottom right of the screen, and then increasing the width of the preview, sidebar is still drawn in the overlay mode.

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

Click on the hamburger button.
Increase width of the preview side of the screen.

Expected result

Overlay sidebar is closed, regular sidebar is drawn instead.

Actual result

Screencast.from.2024-02-03.14-53-07.webm

Troubleshooting

N/A

[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.

[AceTheCreator]

You mean something like this? @rijenkii ?

AsyncAPI.React.Playground.App.mp4

[rijenkii]

Click the hamburger button and expand the right panel all the way out, to the breakpoint that shows the regular sidebar. You haven't expanded it far enough on the video. Reproduction from OP still works, just like the video in the OP.

[AceTheCreator]

You mean something like this? @rijenkii
https://github.com/user-attachments/assets/e20adf82-4105-40f3-bd7d-1086a18abbfb

[rijenkii]

Yes, something like this. The bug is still reproducible on https://asyncapi.github.io/asyncapi-react/ though:

Screencast.from.2024-10-04.23-03-42.webm