fix(page_sidebar): Improve page sidebar and mobile flow behavior

[gadenbuie]

This PR fixes an issue with the height of the sidebar on mobile and improves the mobile flow behavior.

Problem: Sidebar height on mobile

The interaction between the height: auto on the .bslib-page-fill container (applied to mobile-sized screens) and the height: 100% on the .sidebar container of the page_sidebar() layout caused unexpected behavior in both Safari and Chrome/Firefox.

In Safari, the sidebar would be the full height of the screen, but the children of the main container would resize depending on the state of the sidebar. In the video below, you can see that when the sidebar is expanded, it's height: 100% causes the sidebar layout container to resize to 100% of the viewport, causing the children of the main content area to resize as well. When the sidebar is collapsed and the height: 100% is removed, the elements return to their expected sizes. This causes jumpy plots around the transition.

Kapture.2023-11-16.at.09.51.18.mp4

This behavior results from Safari's unique interpretation of the behavior of a height: 100% element when its parent has height: auto.

Unfortunately, in Chrome and Firefox, we don't get the results we're expecting either. In the video below, in Firefox on mobile, you can see that the layout container uses the intrinsic height of the main contents, which are shorter than the full viewport height, and therefore the sidebar is shorter than expected.

Kapture.2023-11-16.at.09.52.33.mp4

Fix: Full height sidebar and mobile flow

The primary fix involves avoiding two things:

1. Don't set height: 100% on the .sidebar container.
2. Don't use height: auto in page_fillable() to toggle filling behavior

The height: 100% on the sidebar container is unnecessary. I think we may have needed it in a previous iteration and kept it out of caution.

The use of height: auto in page fillable is subtle, but probably not what we wanted for a more than just the behavior described above for a couple of reasons:

1. We want to have more control over where fillability is disabled. Currently, page_fillable() disables fillability on the outer container, but in the context of a sidebar we want to keep fillable behavior at the outer edge and instead disable fillability of the main content area of the sidebar layout.
2. Instead of setting height: auto, I considered of toggling display: block or display: flex but this presents another problem. If we move from a flex container to a block container, all of the bslib-gap-spacing classes will still be present and we'll lose the vertical spacing between elements.

In short, we need to toggle fill behavior while retaining display: flex and we'll need more than a single CSS property to control behavior.

In this PR, I added .bslib-flow-mobile, which generally speaking is a class that can be used anywhere to disable the fill behavior of its immediate children. This class is now applied to page_fillable(fillable_mobile = FALSE). (Technically, it sets flex: none; on .html-fill-item direct children.)

Then, .bslib-page-sidebar received an exception to instead break fillability on the children of the page's sidebar main content area. Because the main content area can now scroll inside the page, we also need to adjust the collapse toggle position of that outer sidebar.

Safari

After these changes, on Safari, the sidebar no longer causes the plot size to jump during transition.

Kapture.2023-11-16.at.09.53.44.mp4

Chrome/Firefox

On Chrome/Firefox, the sidebar is now full height, even if the elements inside are scrolling.

Kapture.2023-11-16.at.09.53.09.mp4

Collapse toggle position

Kapture.2023-11-16.at.09.54.34.mp4

Preview on real mobile

Here's a short preview on a real mobile phone (iPhone 13), with both fillable_mobile = FALSE and fillable_mobile = TRUE.

RPReplay_Final1700148539.MP4

Flow utility classes

I think .bslib-flow-mobile is going to be generally useful, but I also see utility in having additional utility classes that can opt into flow behavior at various breakpoints. I added .bslib-flow-sm, .bslib-flow-md and .bslib-flow-lg that turn on flow behavior at or below the breakpoint suffix – i.e. .bslib-flow-md disables fillability for medium-sized screens below the md breakpoint.

[cpsievert]

I think we should bring back the width: 100%

[gadenbuie]

I checked all of our rules and .sidebar always has both grid-column and grid-row properties, which drive the height and width of the sidebar container. I'm comfortable with both being redundant, but happy to leave width for now if you want.

[gadenbuie]

In desktop mode, if the sidebar is too wide for the container, this ensures that the sidebar doesn't expand too far, leaving one collapse icon's worth of space in the main area. Which is useful if there are nested sidebars. (Slightly tangential to this PR but I didn't want to forget to fix this.)