OK
BAD
Steps to reproduce:
-
Use Sidebar.Provider with default collapsible behavior.
-
Render Sidebar with several Sidebar.Group collapsible blocks, each with Sidebar.GroupLabel + Sidebar.GroupContent + nav links (defaultOpen is fine).
-
Resize to width ≤ 767px.
-
Open the mobile sidebar.
Result: You won't be able to view the items inside collapsible groups.
Why is this?
grid-template-rows does not resolve to 1fr, instead resolves to 0fr. No space to display the items.
Doing the change to the class in the browser's developer tools fixes it.
Impact:
emdash-cms/admin uses this:
emdash-cms/emdash#101
Suggested fix:
Treat the open mobile drawer like the expanded desktop sidebar: Either put the same group/sidebar + data-state="expanded" on its root, or stop tying collapsible group height to group-data-[state=expanded]/sidebar when you’re on the mobile sheet.
Do you think @ask-bonk could take this one up? 👀
OK
BAD
Steps to reproduce:
Use Sidebar.Provider with default collapsible behavior.
Render Sidebar with several Sidebar.Group collapsible blocks, each with Sidebar.GroupLabel + Sidebar.GroupContent + nav links (defaultOpen is fine).
Resize to width ≤ 767px.
Open the mobile sidebar.
Result: You won't be able to view the items inside collapsible groups.
Why is this?
grid-template-rowsdoes not resolve to1fr, instead resolves to0fr. No space to display the items.Doing the change to the class in the browser's developer tools fixes it.
Impact:
emdash-cms/adminuses this:emdash-cms/emdash#101
Suggested fix:
Treat the open mobile drawer like the expanded desktop sidebar: Either put the same group/sidebar + data-state="expanded" on its root, or stop tying collapsible group height to group-data-[state=expanded]/sidebar when you’re on the mobile sheet.
Do you think @ask-bonk could take this one up? 👀