Closed huayunh closed 8 months ago
In the playground of the <Drawer> component, nothing is rendered when the viewport is mobile-sized.
<Drawer>
This is supposed to be an open permanent drawer:
open
permanent
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:
It doesn't look like a margin issue, but rather a calculated size which eventually goes negative:
https://github.com/etn-ccis/blui-react-component-library/blob/1c4ccb2f00cb9fedc9b45556bbcfdcd04ba3ae24/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx#L249
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
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?
Screenshots / Screen recording
This is supposed to be an
open
permanent
drawer: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: