etn-ccis/blui-react-component-library

The playground component preview for the drawer component is not rendering on mobile

Closed this issue · 3 comments

huayunh commented

Describe the bug / expected behavior

In the playground of the <Drawer> component, nothing is rendered when the viewport is mobile-sized.

What are the steps to reproduce?

  1. Go to https://brightlayer-ui-components.github.io/react-dev/components/drawer/playground
  2. Observe that the drawer is behaving OK on desktop, but not on mobile sizes

Screenshots / Screen recording

This is supposed to be an open permanent drawer:

image

Suggested fix

This is likely due to the drawer's parent container being shrunk to 0px on mobile due to the use of an fixed size margin:

image
joebochill commented

It doesn't look like a margin issue, but rather a calculated size which eventually goes negative:
image

joebochill commented

Reopening as the proposed fix breaks the expected Drawer behavior:

Drawer.mov