notebooks: use sticky sidebar (!38513) · Merge requests · Administrator / sourcegraph

Administrator requested to merge jp/notebookstickysidebar into main Jul 08, 2022

Created by: limitedmage

Makes the sidebar of the notebooks sticky, so it will scroll with the contents.. This required some changes to the layout (using grid instead of flexbox), but the overall layout should be the same. The sidebar uses react-sticky-box, which is the same library we use for the search sidebar. Unlike a plain CSS position: sticky, this library allows changing the sticky direction when scrolling (so scrolling up will also scroll the sidebar up, even when not at the top yet). I updated the library to the lastest version which allows using it as hook instead of a component.
Fixes the background color of the notebook, which was not the normal background color in other pages.
Changes the notebook outline selected item color to pass a11y color contrast (changed from blue to white/black).

Test plan

Test with empty notebook, notebook with only a few blocks, and a notebook with lots of blocks and heading big enough to scroll the sidebar.