search

etn-ccis / blui-react-component-library

Re-usable React components for use in Brightlayer UI applications
BSD 3-Clause "New" or "Revised" License
17 stars 10 forks source link

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

Closed huayunh closed 8 months ago

huayunh commented 1 year ago

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 9 months ago

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

image
huayunh commented 9 months ago

https://github.com/etn-ccis/blui-react-component-library/blob/1c4ccb2f00cb9fedc9b45556bbcfdcd04ba3ae24/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx#L249

joebochill commented 8 months ago

Reopening as the proposed fix breaks the expected Drawer behavior:

https://github.com/etn-ccis/blui-react-component-library/assets/29152776/b9fa60b5-02ff-454b-9975-6582efab0ab1