halfmoonui/halfmoon

Default sidebar with small screen results in offscreen content

aelr opened this issue · 2 comments

aelr commented

When using a Default type Sidebar, when you go below the smallest breakpoint, the left: var(--sidebar-width); on .content-wrapper falls off, and a sidebar width's of content moves off the right of the page, and there's no way to scroll to it. This is reproducible on the Default Sidebar example on the docs (link). Is there any way to force the content to keep shrinking while keeping the sidebar open?

I'm intentionally not using overlayed-sm-and-down, as it covers the sidebar toggle on my navbar. The sidebar is intended to stay pinned open for long periods, not opened briefly and dismissed.

Is this a feature or a bug? Should I instead use the grid system to create a left column "sidebar" that I toggle on and off like a sidebar?

aelr commented

More detail on the use case: I built a lite Storybook replacement, and the sidebar is the story navigator. A goal is to be able to resize the window and see how components handle small widths (for use in their own grid columns). But this behavior doesn't let me shrink the component beyond that breakpoint.

I guess the expectation is that if your window is that small, there's no way that the remaining space could render something reasonable. The more I think this through, I expect I'll just need to wire up a grid for the sidebar or provide a mechanism to render empty columns next to components to shrink them down and check behavior. The latter is probably the simplest.

aelr commented

I went with that approach.